import VueSetupExtend from 'vite-plugin-vue-setup-extend' export default defineConfig({ plugins: [ VueSetupExtend() ] }) 总结 setup函数作为 Vue3 中 Composition API 的核心,提供了一种全新的方式来编写和组织组件逻辑。它的灵活性和模块化特性使得开发者可以更加高效地构建和维护 Vue 应用。通过理解set...
<template></template>// 直接在vue文件的script标签中添加name属性即可... 4. 结果
方法1: exportdefault{ name:"my-component"} /*业务代码*/ 方法2: //改方法需要vue3.3+ defineOptions({ name:"my-component"}) 方法3:这里主要是在动态加载路由时 const comp=import(`@/component.vue`) comp.then(res=>{res.default.name=item.name})...
<template>姓名:{{name}}年龄:{{age}}修改名字修改年龄查看联系方式</template>exportdefault{name:'Person',setup(){console.log('~',this)letname='花卷'//非响应式letage=22//非响应式lettel='12435143545'//非响应式// 方法functionchangeName(){name='馒头'console.log(name)}functionchangeAge(){age+...
在Vue 3中,setup函数是用于组合式API的,它通常不包含组件的选项,如name、props、emits等。然而,在某些情况下,我们仍然需要为组件指定一个name,例如在使用keep-alive进行组件缓存时。以下是在Vue 3中为组件添加name的几种方法: 1. 在<script>标签外部定义name 这是最常见的方法,特别是在不使用<script...
Vue3 定义 name 1.自动生成 只要在script开启setup语法糖模式 单文件组件会自动根据文件名生成对应的 name 选项 例如 Tree.vue 那他的name 就是 Tree 自动生成,这样做有...
一、setup name 增强 Vue3的setup语法糖是个好东西,但使用setup语法带来的第一个问题就是无法自定义name,而我们使用keep-alive往往是需要name的,解决这个问题通常是通过写两个script标签来解决,一个使用setup,一个不使用,但这样必然是不够优雅的。 import { defineComponent...
3、使用 虽然说 Vue3 会根据文件名推断组件的 name ,但是很多时候还是自定义 name 更加方便一点,而且在使用 keep-alive 的 include 和 exclude 功能时,必须显示的声明 name 才能正常执行逻辑,所以上面的方法任选一种即可。 发布于 2022-03-16 00:51 Vue.js 3 赞同17...
2.在开启一个script用来定义name 优点这种方式可以随意定义name弊端一个单文件组件出现两个script 会让人感到疑惑。 <template></template>import {ref,reactive } from 'vue'export default {name:"XXX"} 3.使用第三方插件unplugin-vue-define-options 安装方法npm i unplugin-vue-define-options -D vite使用 ...