Vue3でセットアップに名前を追加する方法

#Vue3 での名前の用途は何ですか?

1. コンポーネントを再帰するときに名前を定義する必要があります

2. keep-alive include exclude

3 を使用してコンポーネントをキャッシュできます。これは次の場合に実行できます。 Vue がエラーを報告するか、デバッグ中です。コンポーネントの名前を参照してください

Vue3 定義名

1。自動的に生成されます

script setup 構文シュガー モードの単一ファイル コンポーネントをオンにすると、ファイル名に基づいて対応する name オプション (Tree.vue など) が自動的に生成されます。 次に、彼の name は Tree によって自動的に生成されます。これには欠点があります。name を変更したい場合は、コンポーネント名。import という場所がある場合は、コンポーネントも一緒に変更する必要があります。

2. スクリプトを開いて名前を定義します

長所: 名前を自由に定義できます短所: 1 つのファイル コンポーネントに 2 つのスクリプトが表示されると混乱します。

<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()],
})

Configurationtsconfig.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. 個人的な考え: スクリプト内で名前を直接定義するのは良いことではないでしょうか?

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

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


<style lang="less" scoped>

</style>

この問題は Vue コミュニティでも激しく議論され、You Da も次のように回答しました

You Da はこのアイデアは良いと思いますが、いくつかの懸念があります。 name と inheritAttrs を定義する必要があります。このような状況は非常にまれです。ほとんどのコンポーネント ライブラリ開発者はこれら 2 つを頻繁に使用するかもしれませんが、アプリケーションの 90% ではコンポーネントの場合、実際には異なります。一連のトレードオフがあり、小道具の扱いは面倒になり、実装の複雑さも相まって、それだけの価値があるかどうかはわかりません。

しかし、この機能を実装するプラグインはすでにあります unplugin-vue-setup-extend-plus

シンプルなバージョンをコピーしましょう。スクリプトですが、開発者はこのスクリプトを見ることができません

Vue3 セットアップは、名前プラグイン実装のアイデアをサポートしています。上記のプラグイン

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
        }
    }
}

から学び、次に、で作成したプラグインを導入します。 vite config ts

Tree.vue 子コンポーネント

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

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

App.vue 親コンポーネント

<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>

コンポーネントは正常に再帰されました

以上がVue3でセットアップに名前を追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。