1.在遞迴元件的時候需要定義name
2.配合keep-alive include exclude 可以快取元件
3.在Vue有報錯或是調試的時候可以看到元件的name
<script setup></script> 只要在script#開啟setup語法糖模式單一檔案元件會自動根據檔案名稱產生對應的 name 選項例如Tree.vue 那他的name#就是Tree 自動生成，這樣做有一個弊端如果想修改name需要修改元件名稱如果有地方import 該元件需要一併修改。
優點 這種方式可以隨意定義name 弊端 一個單一檔案元件出現兩個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>安裝方法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><template>
<div></div>
</template>
<script name="xiaoman" lang="ts" setup>
import {ref,reactive } from 'vue'
</script>
<style lang="less" scoped>
</style>這件事情在Vue社區也是進行了激烈的討論，而尤大也是做出了回复
尤大覺得這個構思很好，但是有一些擔憂，在我們使用元件的時候需要定義name 和inheritAttrs 情況非常罕見，大部分元件庫的開發人員可能經常會使用這兩個東西，但對於90%的應用程式組件來說，這確實是一組不同的權衡，並且處理props將會變得很麻煩，再加上實現的複雜性，不確定做這件事是否值得。
不過已經有一個插件實作該功能unplugin-vue-setup-extend-plus
我們來復刻一個簡易版其原理還是加一個script 只不過開發人員看不到了這個script
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 加载器）来调整它的应用顺序。`enforce` 的值可以是`pre` 或 `post`
//加载顺序为
//Alias
//带有 `enforce: 'pre'` 的用户插件
//Vite 核心插件
//没有 enforce 值的用户插件
//Vite 构建用的插件
//带有 `enforce: 'post'` 的用户插件
//Vite 后置构建插件（最小化，manifest，报告）
enforce: "pre",
//transform code参数就是我们写的代码比如vue代码 id就是路径例如/src/xx/xx.vue
transform(code, id) {
//只处理vue结尾的文件
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>元件成功遞歸出來
以上是Vue3中setup怎麼加name的詳細內容。更多資訊請關注PHP中文網其他相關文章！
