首页 > 其他分享 >Vue3 setup 如何添加name

Vue3 setup 如何添加name

时间:2023-09-06 09:00:09浏览次数:57  
标签:插件 vue name script setup Vue3 组件 import

Vue3 setup 如何添加name

小满zs 2022-11-29 15:5810778  

image.png

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第2天,点击查看活动详情

Vue3中name有什么用呢?

1.在递归组件的时候需要定义name

2.配合keep-alive include exclude 可以缓存组件

3.在Vue有报错或者调试的时候可以看到组件的name

Vue3 定义 name

1.自动生成

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

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

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

  xml 复制代码
<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 使用

  js 复制代码
// 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

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

使用方法 通过编译宏 defineOptions 添加name 和 inheritAttrs

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

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

  xml 复制代码
<template>
<div></div>
</template>

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


<style lang="less" scoped>

</style>

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

image.png

大致意思就是:尤大觉得这个构思很好,但是有一些担忧,在我们使用组件的时候需要定义name 和 inheritAttrs 情况非常罕见,大部分组件库的开发人员可能经常会使用这两个东西,但对于90%的应用程序组件来说,这确实是一组不同的权衡,并且处理props将会变得很麻烦,再加上实现的复杂性,不确定做这件事是否值得。

不过已经有一个插件实现该功能 unplugin-vue-setup-extend-plus

我们来复刻一个简易版 其原理还是加一个script 只不过开发人员看不到了这个script

Vue3 setup 支持 name 插件实现 思路借鉴上面插件
  ts 复制代码
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 引入我们写好的插件

image.png

Tree.vue 子组件

  xml 复制代码
<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 父组件

  xml 复制代码
<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>

组件成功递归出来

image.png

标签:插件,vue,name,script,setup,Vue3,组件,import
From: https://www.cnblogs.com/mouseleo/p/17681372.html

相关文章

  • vue3探索——使用ref与$parent实现父子组件间通信
    在vue3中,可以使用vue3的APIdefineExpose()函数结合ref或者$parent,实现父子组件数据的传递。子组件向父组件传递数据defineExpose()和ref子组件:通过defineExpose()函数,向外暴露响应式数据或者方法//src/components/son.vue<template><div><h1>儿子有${{so......
  • Vue3实现批量打印二维码与条形码
    (二维码与条形码在vue3中的使用)欢迎阅览本篇文章这篇文章是我在工作途中对批量生成二维码的一些见解,例如vue-qr(二维码)与jsbarcode(条形码)在vxe-table表格中的使用,二维码与条形码的批量生成与打印(打印时一页一个码)等。注意!本篇文章的所有代码均使用setup语法糖与TypeScript,请确保......
  • vue3如何监听 props 的变化?
    背景实际开发过程中,当需要通过watch 监听传入的props的某个值的变化,来动态改变组件内部的样式,实现方式如下:exportdefault{name:'countdown',props:{showBox:{type:Boolean,required:true,default:false},},setup(prop......
  • vue3.0 el-table 动态合并单元格
    <el-tablev-resize:34style="margin:10px010px":data="tableData":header-cell-style="{background:'#F6F6F6',height:'10px','text-align':'center'}":......
  • antd限制开始时间与结束时间范围是30天,并不能选择当前日期之后的日期 vue3(默认展示近7
    <a-range-picker:value="hackValue||dateArr":disabled-date="disabledDate"style="width:240px"separator="~":allow-cl......
  • Vue3带来的新变化
    Vue3带来的新变化性能提升首次渲染更快diff算法更快内存占用更少打包体积变小更好的Typescript支持CompositionAPI (重点)在使用vue2.x版本开发较复杂的组件时,逻辑难以复用,组合式api的出现可以解决此类问题相关阅读:Vue3中文文档 https://vue3js.cn/docs/zh/......
  • 从零开始一个vue3前端项目day04-头部导航篇
    在实际开发项目中通常会把头部导航栏写成一个通用组件,这里来具体说一下实现思路1:front-header组件就是我们的头部导航栏,路由我们已经配置好了,把每个导航的首页路径,配置成navList(包含name,path),这样就通过遍历navList就能写出一个首页导航组件 2:导航的选中状态实现,不仅仅是切......
  • dotnet 读 WPF 源代码笔记 GlyphRun 的 DeviceFontName 的功能是什么
    在WPF里面的GlyphRun里,有一个令人迷惑的DeviceFontName属性,似乎给这个属性传入什么值,结果都不会有变更。通过阅读源代码,可以了解到,这是一个没什么用途的属性。本文将告诉大家这个属性的细节逻辑在上一篇博客WPF简单聊聊如何使用DrawGlyphRun绘制文本里面就提到如何创......
  • 从壹开始前后端开发【.Net6+Vue3】(二)前端框架
    项目名称:KeepGoing(继续前进)介绍工作后,学习的脚步一直停停走走,希望可以以此项目为基础,可以不断的迫使自己不断的学习以及成长将以Girvs框架为基础,从壹开始二次开发一个前后端管理框架在这过程中一步步去学习使用到的技术点,也同时会将在此过程中遇到的问题进行分享项目地址......
  • vue3+ts Axios封装—重复请求拦截
    创建好vue3项目1.安装Axios与ElementPlusAxios安装npminstallaxiosElementPlus安装官网入口:https://element-plus.gitee.io/zh-CN/npminstallelement-plus--saveElement主要用到信息提示与全屏加载动画2.在src目录下创建api文件夹和utils文件夹api......