首页 前端知识 vue3 组件自己引用自己 递归组件 组件命名

vue3 组件自己引用自己 递归组件 组件命名

2024-01-24 15:01:24 前端知识 前端哥 475 949 我要收藏

本人前端开发一枚,以前一直用vue2.0,为了更新自己掌握的技术学习如何使用vue3.0。

在vue3.0项目中想要实现菜单组件,要使用到递归组件的方法,发现不知道怎么给组件重命名!!

在vue2.0中想要实现递归组件方式很简单,只要给组件命名,然后自己调用即可:

<template>
    <div>
        <menu-item :menuList="menuList"></menu-item> //调用自己
    </div>
</template>

<script>
export default {
  name: 'menuItem', //给组件命名
  props: {
    menuList: {
        type: Array,
        default: () => []
    }
  },
  data () {
    return {
      
    }
  }
}
</script>

<style scoped lang='less'>

</style>

然而在vue3.0中由于采用了script setup 语法糖,这种命名方式就不可行了,原因是它会自动以文件名为主,不需要再写name属性:

<script setup>
</script>

后来发现直接在script setup同级中再添加一个script即可:

<template>
    <div>
        <menu-item :menuList="menuList"></menu-item> //调用自己
    </div>
</template>

<script>
    export default {
        name: 'menuItem' //给组件命名
    }
</script>

<script setup>
    const props = defineProps({
        menuList: {
            type: Array,
            default: () => []
        }
    })
</script>


<style scoped lang='less'>

</style>

使用插件:unplugin-vue-define-options 给组件定义别名

1.安装插件

npm install unplugin-vue-define-options -D

2.在vite.config.js文件中配置

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import DefineOptions from 'unplugin-vue-define-options/vite'
 
export default defineConfig({
  plugins: [vue(), DefineOptions()],
});

3.配置完成,在组件中使用:

<template>
    <div>
        <menu-item :menuList="menuList"></menu-item> //调用自己
    </div>
</template>

<script setup>
    defineOptions({
        name: 'menuItem' //给组件命名
    });
    const props = defineProps({
        menuList: {
            type: Array,
            default: () => []
        }
    })
</script>


<style scoped lang='less'>

</style>

使用了typescript的,可以配合插件直接在script标签中设置name,具体方式如下:

1.安装插件:

npm install vite-plugin-vue-setup-extend

2.在script 标签中直接设置name即可:

<script lang="ts" setup name="menuItem">

</script>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/188.html
评论
会员中心 联系我 留言建议 回顶部
复制成功!