vue3 局部组件和全局组件注册,递归组件使用

1 局部组件使用

<template>

    <div>

        <card></card>

    </div>

</template>

<script setup lang="ts">

  import { watchEffect,ref,reactive } from 'vue';

  //局部组件

  //import Card from './components/Card.vue'

</script>

2 全局组件使用

2-1  main.ts 中注册

import { createApp } from 'vue'

import App from './App.vue'

import card from './components/Card.vue'

//注册全局组件

export const app = createApp(App)

app.component('Card',card);

app.mount('#app')

//简写注册组件

//createApp(App).component('Card',card).mount('#app')

2-2  app.vue 中直接使用即可

<template>

    <div>

        <!-- 注册全局组件 -->

        <card></card>

    </div>

</template>

3 递归组件

3-1 app.vue

<template>

        <TreeVue :data="data"></TreeVue>

</template>

<script setup lang="ts">

  import { watchEffect,ref,reactive } from 'vue';

  //局部组件

  import TreeVue from './components/Tree.vue'

type TreeList = {

  name: string;

  icon?: string;

  checked:boolean,

  children?: TreeList[] | [];

};

const data = reactive<TreeList[]>([

  {

    name: "no.1",

    checked:false,

    children: [

      {

        name: "no.1-1",

        checked:true,

        children: [

          {

            name: "no.1-1-1",

            checked:false

          },

        ],

      },

    ],

  },

  {

    name: "no.2",

    checked:true,

    children: [

      {

        name: "no.2-1",

        checked:true

      },

    ],

  },

type TreeList = {

  name: string;

  icon?: string;

  checked:boolean,

  children?: TreeList[] | [];

};

]);

3-2 Tree.vue

<template>

    <div>

        <div @click.stop="clickTap(item,$event)" class="tree" v-for="item in data" :key="item.name">

            <input v-model="item.checked" type="checkbox">

            <span>{{ item.name }}</span>

            <!-- 递归组件--vue3可以使用文件名直接当组件名 -->

            <!-- item?.children?.length 数组没有了就结束递归了，如果有 :data会一直递归下去  -->

            <!-- <Tree v-if="item?.children?.length" :data="item?.children"></Tree> -->

            <huhu v-if="item?.children?.length" :data="item?.children"></huhu>

        </div>

    </div>

  </template>

  <script setup lang="ts">

  import {ref, reactive } from 'vue'

  interface Tree{

    name:string,

    checked:boolean,

    children?:Tree[]

  }

  defineProps<{

    data?:Tree[]

  }>()

  const clickTap =(item,e)=>{

    console.log(item,e)

    console.log(e.target)

  }

  </script>

  <!-- 如果不想用文件名称作为最近vue3提供了如下方式 -->

  <script lang="ts">

    export default{

      name:'huhu'

    }

    </script>