So fügen Sie dem Setup in Vue3 einen Namen hinzu

Wozu dient der Name in Vue3?

1. Sie müssen einen Namen definieren, wenn Sie eine Komponente rekursieren

2. Verwenden Sie Keep-Alive-Include-Exclude, um die Komponente zwischenzuspeichern.

3 Sie können den Namen der Komponente sehen, wenn Vue einen Fehler meldet oder Debugging Definiert den Namen

1. Automatisch generieren

<script setup></script> Solange die setup-Syntax-Zuckermodus-Einzeldateikomponente in script aktiviert ist code> wird die entsprechende einzelne Dateikomponente automatisch entsprechend dem Dateinamen generiert, z. B. <code>Tree.vue und dann dessen name wird automatisch von Tree generiert. Wenn Sie name ändern möchten, müssen Sie den Komponentennamen ändern >import, die Komponente muss gemeinsam geändert werden.

2. Öffnen Sie ein Skript, um den Namen zu definieren<script setup></script> 只要在script开启setup语法糖模式 单文件组件会自动根据文件名生成对应的 name 选项 例如 Tree.vue 那他的name 就是 Tree 自动生成，这样做有一个弊端如果想修改name需要修改组件名称如果有地方import 该组件需要一并修改。

2.在开启一个script用来定义name

优点 这种方式可以随意定义name 弊端 一个单文件组件出现两个script 会让人感到疑惑。

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

<script lang="ts" setup>
import {ref,reactive } from &#39;vue&#39;
</script>

<script lang=&#39;ts&#39;>
 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: &#39;Foo&#39;,
  inheritAttrs: false,
})
</script>

4.个人想法 我想着直接在script 定义name 不好吗？

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

<script name="xiaoman" lang="ts" setup>
import {ref,reactive } from &#39;vue&#39;
</script>


<style lang="less" scoped>

</style>

这件事情在Vue社区也是进行了激烈的讨论，而尤大也是做出了回复

尤大觉得这个构思很好，但是有一些担忧，在我们使用组件的时候需要定义name 和 inheritAttrs Vorteile: Diese Methode kann den Namen nach Belieben definieren. Nachteile: Das Erscheinen zweier Skripte in einer einzelnen Dateikomponente führt zu Verwirrung.

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}` :  &#39;&#39;}>
                 export default {
                    ${name ? `name:"${name}",`  : &#39;&#39;}
                    ${inheritAttrs ? `inheritAttrs: ${inheritAttrs !== &#39;false&#39;},` : &#39;&#39;}
                 }
                </script>
                `;
                //最后拼接上这段代码 也就是我们加的script这一段 返回code
                code += template;
               // console.log(code)
            }

            return code
        }
    }
}

3. Verwenden Sie das Drittanbieter-Plug-in „unplugin-vue-define-options“

Installationsmethode npm i unplugin-vue-define-options -D

vite code> Verwenden Sie <h3> <pre class="brush:js;">&lt;template&gt; &lt;div v-for=&quot;item in data&quot;&gt; {{ item.name }} &lt;xm v-if=&quot;item?.children?.length&quot; :data=&amp;#39;item?.children&amp;#39;&gt;&lt;/xm&gt; &lt;/div&gt; &lt;/template&gt; &lt;script name=&amp;#39;xm&amp;#39; lang=&quot;ts&quot; setup&gt; import { ref, reactive } from &amp;#39;vue&amp;#39; defineProps&lt;{ data: any[] }&gt;() &lt;/script&gt;</pre></h3>Konfigurieren Sie <code>tsconfig.json

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

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

Verwendungsmethode: Fügen Sie name und inheritAttrs hinzu, indem Sie das Makro defineOptions kompilieren code><p>rrreee<img src="https://img.php.cn/upload/article/000/887/227/168394200834811.png" alt="So fügen Sie dem Setup in Vue3 einen Namen hinzu"> 4. Persönliche Gedanken: Ist es nicht gut, den Namen direkt im Skript zu definieren? </p>rrreee<p>Diese Angelegenheit wurde auch in der Vue-Community intensiv diskutiert, und Youda hat auch geantwortet</p> <p><strong>Youda findet diese Idee sehr gut, aber es gibt einige Bedenken, die definiert werden müssen, wenn wir Komponenten <code>Name und <code>inheritAttrs sind sehr selten und die meisten Entwickler von Komponentenbibliotheken verwenden diese beiden Dinge möglicherweise häufig, aber für 90 % der Anwendungskomponenten trifft dies zu. Es handelt sich um andere Kompromisse und den Umgang damit props wird umständlich sein, und gepaart mit der Komplexität der Implementierung ist es nicht sicher, ob es sich lohnt.

Aber es gibt bereits ein Plug-in, das diese Funktion unplugin-vue-setup-extend-plus implementiert

Kopieren wir eine einfache Version. Das Prinzip besteht darin, ein Skript hinzuzufügen, aber Entwickler können dieses Skript nicht sehen🎜🎜Vue3 Setup-Unterstützung Die Name-Plug-in-Implementierungsidee basiert auf dem obigen Plug-in 🎜rrreee🎜 und führt dann das Plug-in ein, das wir in vite config ts geschrieben haben🎜🎜🎜🎜🎜Tree.vue untergeordnete Komponente🎜rrreee🎜App.vue übergeordnetes Element Komponente🎜rrreee🎜Die Komponente wurde erfolgreich rekursiert🎜🎜🎜🎜

Das obige ist der detaillierte Inhalt vonSo fügen Sie dem Setup in Vue3 einen Namen hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!