Vue3中setup如何添加name

這篇文章主要介紹了Vue3中setup如何添加name的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue3中setup如何添加name文章都會有所收獲，下面我們一起來看看吧。

目前創(chuàng)新互聯(lián)建站已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬空間、網(wǎng)站托管、服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計、壽光網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

Vue3中name有什么用呢？

1.在遞歸組件的時候需要定義name

2.配合keep-alive include exclude 可以緩存組件

3.在Vue有報錯或者調(diào)試的時候可以看到組件的name

Vue3 定義 name

1.自動生成

<script setup> 只要在script開啟setup語法糖模式 單文件組件會自動根據(jù)文件名生成對應(yīng)的 name 選項 例如 Tree.vue 那他的name 就是 Tree 自動生成，這樣做有一個弊端如果想修改name需要修改組件名稱如果有地方import 該組件需要一并修改。

2.在開啟一個script用來定義name

優(yōu)點 這種方式可以隨意定義name 弊端 一個單文件組件出現(xiàn)兩個script 會讓人感到疑惑。

<template>
<div></div>
</template>

<script lang="ts" setup>
import {ref,reactive } from 'vue'
</script>

<script lang='ts'>
 export default {
    name:"XXX"
 }
</script>

<style lang="less" scoped>

</style>

3.使用第三方插件 unplugin-vue-define-options

安裝方法 npm i unplugin-vue-define-options -D

vite 使用

// vite.config.ts
import DefineOptions from 'unplugin-vue-define-options/vite'
import Vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [Vue(), DefineOptions()],
})

配置tsconfig.json

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["unplugin-vue-define-options/macros-global" /* ... */]
  }
}

使用方法 通過編譯宏 defineOptions 添加name 和 inheritAttrs

<script setup lang="ts">
defineOptions({
  name: 'Foo',
  inheritAttrs: false,
})
</script>

4.個人想法 我想著直接在script 定義name 不好嗎？

<template>
<div></div>
</template>

<script name="xiaoman" lang="ts" setup>
import {ref,reactive } from 'vue'
</script>


<style lang="less" scoped>

</style>

這件事情在Vue社區(qū)也是進(jìn)行了激烈的討論，而尤大也是做出了回復(fù)

尤大覺得這個構(gòu)思很好，但是有一些擔(dān)憂，在我們使用組件的時候需要定義name 和 inheritAttrs 情況非常罕見，大部分組件庫的開發(fā)人員可能經(jīng)常會使用這兩個東西，但對于90%的應(yīng)用程序組件來說，這確實是一組不同的權(quán)衡，并且處理props將會變得很麻煩，再加上實現(xiàn)的復(fù)雜性，不確定做這件事是否值得。

不過已經(jīng)有一個插件實現(xiàn)該功能 unplugin-vue-setup-extend-plus

我們來復(fù)刻一個簡易版 其原理還是加一個script 只不過開發(fā)人員看不到了這個script

Vue3 setup 支持 name 插件實現(xiàn) 思路借鑒上面插件

import type { Plugin } from 'vite'
//@vue/compiler-sfc 這個插件是處理我們單文件組件的代碼解析
import { compileScript, parse } from '@vue/compiler-sfc'

export default function setupName(): Plugin {
    return {

        name: 'vite:plugin:vue:name',
        //一個 Vite 插件可以額外指定一個 `enforce` 屬性
        //（類似于 webpack 加載器）來調(diào)整它的應(yīng)用順序。`enforce` 的值可以是`pre` 或 `post`
        //加載順序為
          //Alias
          //帶有 `enforce: 'pre'` 的用戶插件
          //Vite 核心插件
          //沒有 enforce 值的用戶插件
          //Vite 構(gòu)建用的插件
          //帶有 `enforce: 'post'` 的用戶插件
         //Vite 后置構(gòu)建插件（最小化，manifest，報告）
        enforce: "pre",
        //transform code參數(shù)就是我們寫的代碼比如vue代碼  id就是路徑例如/src/xx/xx.vue
        transform(code, id) {
            //只處理vue結(jié)尾的文件
            if (/.vue$/.test(id)) {
                let { descriptor } = parse(code)
                //通過compileScript 處理script 返回result
                  //attrs: { name: 'xm', lang: 'ts', setup: true },
                  //lang: 'ts',
                  //setup: true,
                const result = compileScript(descriptor, { id })
                //attrs 此時就是一個對象
                const name = result.attrs.name 
                const lang = result.attrs.lang
                const inheritAttrs = result.attrs.inheritAttrs
                //寫入script
                const template = `
                <script ${lang ? `lang=${lang}` :  ''}>
                 export default {
                    ${name ? `name:"${name}",`  : ''}
                    ${inheritAttrs ? `inheritAttrs: ${inheritAttrs !== 'false'},` : ''}
                 }
                </script>
                `;
                //最后拼接上這段代碼 也就是我們加的script這一段 返回code
                code += template;
               // console.log(code)
            }

            return code
        }
    }
}

然后在vite config ts 引入我們寫好的插件

Tree.vue 子組件

<template>
    <div v-for="item in data">
        {{ item.name }}
        <xm v-if="item?.children?.length" :data='item?.children'></xm>
    </div>
</template>

<script name='xm' lang="ts" setup>
import { ref, reactive } from 'vue'
defineProps<{
    data: any[]
}>()
</script>

App.vue 父組件

<template>
    <TreeVue :data="data"></TreeVue>
</template>

<script lang="ts" setup>
import TreeVue from './components/Tree.vue';
const data = [
    {
        name: "1",
        children: [
            {
                name: "1-1",
                children: [
                    {
                        name: "1-1-1"
                    }
                ]
            }
        ]
    }
]
</script>

組件成功遞歸出來

關(guān)于“Vue3中setup如何添加name”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“Vue3中setup如何添加name”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站題目：Vue3中setup如何添加name
標(biāo)題來源：http://muchs.cn/article6/jojiog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、網(wǎng)站制作、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站設(shè)計、域名注冊、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)