1、vue3如何注册全局组件呢?
首先我们在main.ts中
import { createApp } from 'vue'
import App from './App.vue'
import router from "./router"
import HelloWorld from "./components/HelloWorld.vue" //引入
const app = createApp(App)
// 挂载到 Vue 根实例将组件
app.use(router)
.component('Card', HelloWorld) //注意这个一定放在mount之前
.mount('#app');
然后我们直接在某个页面组件中使用,如下这样就可以了
<template>
<div class="home_main">
<Card></Card>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
const menudata = ref(null);
const dataArr = reactive<number[]>([1, 2, 3, 4])
</script>
<style lang="scss">
.home_main {
width: 100%;
height: 100%;
background: #d7d7d7;
font-size: 30px;
color: aqua
}
</style>
2、递归组件
跟全局组件的引入方式一致如下是home.vue
<template>
<div class="home_main">
<Tree :list="navBarList" />
</div>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
const navBarList = reactive([
{
name: '一级导航 1'
},
{
name: '一级导航 2',
children: [
{ name: '二级导航 2-1' },
{
name: '二级导航 2-2',
children: [
{ name: '三级导航 2-2-1' },
{ name: '三级导航 2-2-2' },
]
},
{ name: '二级导航 2-2' }
]
},
{
name: '一级导航 3'
}
])
</script>
<style lang="scss">
.home_main {
width: 100%;
height: 100%;
background: #d7d7d7;
font-size: 30px;
color: aqua
}
</style>
如下是Tree组件
<template>
<ul>
<template v-for="(item, index) in list" :key="index">
<li>{{ item.name }}</li>
<Tree v-if="'children' in item" :key="item" :list="item.children" />
</template>
</ul>
</template>
<script setup lang="ts">
const props = defineProps({
list: {
type: Array,
default: () => []
}
})
</script>