Vue3当中通过script和defineOptions两种方式指定组件的name

最新推荐文章于 2024-07-16 15:21:54 发布

@二十六

最新推荐文章于 2024-07-16 15:21:54 发布

阅读量987

点赞数 9

文章标签： vue.js javascript 前端 defineOptions

本文链接：https://blog.csdn.net/qq_44212319/article/details/135748214

版权

本文介绍了在Vue3中使用setup语法时如何给组件添加name属性以便于调试，包括使用`<script>`标签和`defineOptions`方法，并强调了name属性在无限递归菜单组件中的重要性。

摘要由CSDN通过智能技术生成

在vue2当中我们可以通过name属性来指定组件的名称，这个name会显示在vue调试工具当中，方便我们进行调试；当我们想实现一个无限递归的菜单组件时，也需要用到这个name属性，没有name属性的组件是无法递归的。

在vue3当中，当使用setup语法糖时，我们没有办法在script当中添加一个name属性，但是可以采取其他的方式来实现，代码如下：

使用两个script块

<script setup>
import { onMounted } from 'vue';
onMounted(() => {
  console.log("页面挂载");
});
</script>

<script>
  export default {
    name: "Demo",
  }
</script>

使用defineOptions，注意：版本要求 Vue 3.3+

<script setup>
import { onMounted, defineOptions } from 'vue';

defineOptions({
  name: "Demo"
});

onMounted(() => {
  console.log("页面挂载");
});
</script>