定义组件的name
defineOptions
使用插件unplugin-vue-define-options
defineComponent
放弃<script setup> 语法糖，使用defineComponent
新增加一个script标签，在这个标签中写入name属性[待验证]
<script lang="ts">
export default { name: "MyMenuItem", };
</script>
<script lang="ts" setup> </script>
组件name作用
递归组件
一个组件要用自己的时候，可以通过自己的名字来使用自己。
<template>
<Menu.SubMenu :key="props.menuInfo?.name" v-bind="$attrs">
<template #title>
<span>
<icon-font :type="props.menuInfo.meta?.icon" />
<!-- <TitleI18n :title="props.menuInfo?.meta?.title" /> -->
<span>{{ props.menuInfo?.meta?.title }}</span>
</span>
</template>
<template v-for="item in menuChildren" :key="item.name || item.fullPath">
<!-- 递归生成菜单 -->
<MyMenuItem :menu-info="item" />
</template>
</Menu.SubMenu>
</template>
<script setup lang="ts">
defineOptions({
name: 'MyMenuItem',
});
...
</script>
移除keep-alive状态下组件自动缓存功能 -> exclud=“name”
在App.vue中使用了keep-alive导致我们第二次进入的时候页面不会重新请求ajax，即mounted() 钩子函数只会执行一次。
有两个解决方案,一个增加activated()函数,每次进入新页面的时候再获取一次数据。
还有个方案就是在keep-alive中增加 exclud=“name”
浏览器使用vue-tools调试时
vue-devtools调试工具里显示的组件名称是由vue中组件name决定的
