展示型网站建,中信建设有限责任公司电话打不通,伊春网站建设,cpanel面板 WordPressVue3 如何在script setup里设置组件name属性 文章目录 Vue3 如何在\script setup里设置组件name属性一、Vue组件中 name 的用处二、难看但实用的方法三、使用第三方插件支持安装插件插件基本配置插件基本使用 四、Vue官方解决方法4.1 Vue3.3版本之前安装插件插…
Vue3 如何在script setup里设置组件name属性 文章目录 Vue3 如何在\script setup里设置组件name属性一、Vue组件中 name 的用处二、难看但实用的方法三、使用第三方插件支持安装插件插件基本配置插件基本使用 四、Vue官方解决方法4.1 Vue3.3版本之前安装插件插件基本配置使用 defineOptions 编译宏 4.2 Vue3.3版本之后 五、后记参考资料推荐博文 一、Vue组件中 name 的用处
一般情况在 script setup语法糖下大多数人往往将其忽略毕竟确实很少用得上 name 属性但如果需要用到时却为怎么声明使用犯起了难即使 Vue 在默认情况下会将文件名定义为 name 属性但文件名是可以重复的如出现一大堆 index.vue 阁下又将如何应对呢。我们先来看看在什么场景下需要使用到 name 属性或则说 name 属性具体能够做什么有什么用。 keep-alive 的 include 和 exclude 属性根据组件的 name 进行匹配如果想要条件性地被 keep-alive 缓存就必须显式声明一个 name 属性。 keep-alive :include[a, b] :exclude[c, d]component :isview /
/keep-alive组件递归引用自己在 Vue 组件中只需要引用的组件名称与当前组件 name 属性保持一直组件是可以自己引用自己的这点在编写类似于 Tree 树形组件时十分有用。需要注意的一点是为避免死循环递归请带上条件语句。 templatemy-component v-if递归终止条件 /
/templatescript langtsexport default {name: my-component}
/script在开发者工具调试工具中是以 name 属性标志组件的在搜索功能上通过 name 名称能够快速定位组件方便调试同时合理清晰的组件名称来讲对于报错信息也更容易精准定位。图中的 index 是依据文件名称自动推导在不声明 name 属性的情况下容易发生重复现象。 二、难看但实用的方法
其实原理很简单既然 script setup 语法糖里不支持声明 name 属性那就绕一下Vue 允许同时包含一个 script setup 和一个 script 快那么把 script setup 上做不来的事情给 script 来做不就行了。但这个写法也有一个很明显的特点那就是丑对于强迫症来说完全不能接受就为了声明 name 属性需要额外写多一个块这显然是不合理的。
script langtsexport default {name: my-component}
/scriptscript langts setup/* 业务代码 */
/script三、使用第三方插件支持
对于喜欢这种写法的人来说可以说是福音市面上也有很多第三方的组件、插件也存在这种写法。但这种方法显然也不是最好的一是需要额外的打插件操作二是与 Vue 版本依赖关系大。 第三方插件有很多在这里推荐一个比较好的插件 unplugin-vue-setup-extend-plus。
安装插件
yarn add unplugin-vue-setup-extend-pluspnpm add unplugin-vue-setup-extend-plus插件基本配置
// vite.config.ts
import vueSetupExtend from unplugin-vue-setup-extend-plus/viteexport default defineConfig({plugins: [vueSetupExtend()],
})// vue.config.js
module.exports defineConfig({configureWebpack: {plugins: [require(unplugin-vue-setup-extend-plus/webpack).default()],}
})插件基本使用
template/templatescript langts setup namemy-component/* 业务代码 */
/script四、Vue官方解决方法
使用官方的好处就是不用担心其兼容性等问题Vue官方的解决办法有点特殊对于 Vue3.3 版本之前与之后分为两个方法先来说说说 Vue3.3 版本之前需要怎么做。
4.1 Vue3.3版本之前
在 Vue 未正式解决这个问题之前需要安装一个官方插件来支持额外的语法宏在script setup上。
安装插件
使用包管理工具安装一个名为 unplugin-vue-define-options的插件。
yarn add unplugin-vue-define-options -Dpnpm add unplugin-vue-define-options -D对于 Volar 的语法检测需要再额外安装一个 vue-macros/volar 插件当然如果你不使用 Volar 的话那可以选择无视。
yarn add vue-macros/volar -Dpnpm add vue-macros/volar -D插件基本配置
需要注意的是vite 与 vuecli 配置方式不同请根据项目各自选择。
// vite.config.ts
import DefineOptions from unplugin-vue-define-options/viteexport default defineConfig({plugins: [DefineOptions()],
})// vue.config.js
module.exports defineConfig({configureWebpack: {plugins: [require(unplugin-vue-define-options/webpack)()],}
})TypeScript 支持配置
// tsconfig.json
{compilerOptions: {types: [unplugin-vue-define-options/macros-global]}
}对于语法检测如果出现报错的情况使用 Volar 的可以安装 vue-macros/volar插件并配置相关代码。
// tsconfig.json
{vueCompilerOptions: {target: 3, // 或 2.7 用于 Vue 2plugins: [vue-macros/volar/define-options// ...更多功能]}
}或则更直接在 .eslintrc.js 里加上下述配置直接忽略错误当然只是语法检测层面程序实际不受影响。
module.exports {globals: {defineOptions: readonly}
}使用 defineOptions 编译宏
与 defineProps 编译宏类似此时我们多了一个可以设置 name 属性的编译宏只需要传入参数即可配置心心念念的 name 属性。
script langts setupdefineOptions({name: my-component})/* 业务代码 */
/script4.2 Vue3.3版本之后
在 Vue3.3 版本更新之后对于这个问题的解决方案就简单多了defineOptions 编译宏以内置支持不需要再去额外安装其他插件直接使用即可。 defineOptions能做的不只是声明 name 属性其功能能做到更多如是否允许组件 attribute 透传行为的 inheritAttrs 属性。 五、后记
对于在 script setup 中声明 name 的问题其实老外早就想到且引起了许多的讨论尤雨溪也多次下场也有人提出以 script setup namexxx 作为解决方案但最终采用的是 defineOptions 编译宏并在 Vue3.3 版本之后内置支持。对于使用者来说name 属性可能有点微不足道但就是为了实现这么一个小小的功能背后的实现却充斥着各位开发者的努力 。https://github.com/vuejs/core/issues/5218https://github.com/vuejs/rfcs/discussions/430#discussioncomment-2333745 参考资料
因发布平台差异导致阅读体验不同源文贴出《Vue3 如何在
官方手册 Vue官方文档 defineOptionsVue官方文档 name Vue Macros defineOptionsGithub unplugin-vue-setup-extend-plus 推荐博文
《『精』Vue 使用props为路由组件传参『详解』》《Vue3 组件如何模块化抽离Props》
