在Vue 3中,当使用<script setup>语法糖时,由于该语法旨在简化Composition API的使用,因此它不直接支持设置组件的name属性,这在使用<keep-alive>进行组件缓存时可能会带来问题。不过,有几种方法可以在<script setup>中设置组件的name,以确保<keep-alive>缓存能够正确生效。 方法一:使用...
<script setup>只要在script开启setup语法糖模式 单文件组件会自动根据文件名生成对应的name选项 例如Tree.vue那他的name就是Tree自动生成,这样做有一个弊端如果想修改name需要修改组件名称如果有地方import该组件需要一并修改。 2.在开启一个script用来定义name 优点这种方式可以随意定义name弊端一个单文件组件出现两个sc...
1. 多使用一个<script>标签命名 <script>exportdefault{name:'Person'}</script><scriptsetup>...</script> 2.使用插件 安装插件vite-plugin-vue-setup-extend pnpminstallvite-plugin-vue-setup-extend-D 在vite.config文件引入 importVueSetuoExtend from 'vite-plugin-vue-setup-extend'exportdefaultdefineConfig...
对于vue@3.2.34及以上版本,在使用<script setup>的单文件组件时,vue 会根据组件文件名,自动推导出 name 属性。也就是名为 MyComponent.vue 或 my-component.vue 的文件的, name 属性为 MyComponent,而当你在组件内显示定义 name 属性时,会覆盖推导出的名称。 组件的 name 属性不仅能用于<KeepAlive>,而且在...
Vue3 定义 name 1.自动生成 <script setup> 只要在script开启setup语法糖模式 单文件组件会自动根据文件名生成对应的 name 选项 例如 Tree.vue 那他的name 就是 Tree 自动...
组件名称：exportdefaultdefineComponent(name:"HelloWorld",setup(){}} 引入命名和文件命名：<template><...
<script>setup(){ export default { name: 'MyComponentName' } }</script> image.gif 甚至vue3.0中也可以写这种方式,但是如果采用script setup 语法糖的话这种方式就不可行了,原因是它会自动以文件名为主,不需要在写name属性。 <scriptsetup></script> ...
直到我发现了如下的script-setup写法,让我觉得这才应该是真正的 vue3 如何定义组件名 => name script-setup无法指定当前组件的名字,所以使用的时候以文件名为主 如何导入组件 => components 在script-setup 中导入任意的组件就可以直接在template中使用
Vue3 定义 name 1.自动生成 <script setup>只要在script开启setup语法糖模式 单文件组件会自动根据文件名生成对应的name选项 例如Tree.vue那他的name就是Tree自动生成,这样做有一个弊端如果想修改name需要修改组件名称如果有地方import该组件需要一并修改。
一、使用与不使用 script setup 的对比 1、不使用 script setup 的繁杂性 我们之前的组件可能是这样的: <template> <div> <Card>{{msg}}</Card> </div> </template> <script lang="ts">import {ref, defineComponent }from"vue"; import Cardfrom"./components/Card.vue"; ...