Bagaimana untuk menambah nama pada persediaan dalam Vue3

Apakah kegunaan nama dalam Vue3?

1. Anda perlu mentakrifkan nama

apabila komponen secara rekursif Lihat nama komponen

Nama definisi Vue3

1 secara automatik

Selagi anda menghidupkan

komponen fail tunggal mod gula sintaks dalam

, ia akan Menjana pilihan <script setup></script> yang sepadan secara automatik berdasarkan nama fail, seperti script Kemudian setupnya dijana secara automatik sebagai name Ini mempunyai kelemahan Jika anda ingin mengubah suai Tree.vue, anda perlu mengubah suai nama komponen Jika terdapat tempat untuk komponen, name Perlu diubah suai bersama-sama. Treename2. Buka skrip untuk mentakrifkan namaimport

Kelebihan: Anda boleh menentukan nama sesuka hati Kelemahan: Dua skrip yang muncul dalam satu komponen fail akan membuat orang keliru.

<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. Gunakan pemalam pihak ketiga unplugin-vue-define-options

Kaedah pemasangan

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

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

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

Konfigurasivite

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

digunakan dengan menyusun makro tsconfig.json untuk menambah

dan

defineOptions

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

name 4. Pemikiran peribadi: Bukankah bagus untuk menentukan nama terus dalam skrip? inheritAttrs

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

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


<style lang="less" scoped>

</style>

Perkara ini juga dibincangkan secara intensif dalam komuniti Vue, dan You Da turut memberi maklum balas

You Da berpendapat idea ini bagus, tetapi mempunyai beberapa kebimbangan kita perlu mentakrifkan

dan

apabila kita menggunakan komponen Kebanyakan pembangun perpustakaan komponen mungkin sering menggunakan dua perkara ini, tetapi untuk 90% komponen aplikasi, ini sememangnya menjadi masalah dengan prop akan menjadi menyusahkan, dan ditambah pula dengan kerumitan pelaksanaan, saya tidak pasti ia berbaloi. nameinheritAttrsTetapi sudah ada pemalam yang melaksanakan fungsi ini unplugin-vue-setup-extend-plus

Mari salin versi mudah Prinsipnya ialah menambah skrip. Tetapi Pembangun tidak dapat melihat skrip ini

Persediaan Vue3 menyokong idea pelaksanaan pemalam nama, belajar daripada pemalam di atas

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

, dan kemudian memperkenalkan pemalam yang kami tulis vite config ts

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

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

Komponen telah berjaya diulang

Atas ialah kandungan terperinci Bagaimana untuk menambah nama pada persediaan dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!