Vue3+TypeScript学习笔记（九）

1. Vue中的组件注册方式分为局部注册和全局注册两种，在Vue3setup语法糖中组件不用额外defineComponent，直接引入就可以使用。通过这种方式注册的组件为局部注册。
2. 全局注册：全局注册需要先将组件引入main.ts中，然后用app.component()函数进行全局注册，该函数接收两个参数，第一个是组件的名称，第二个是组件实例对象

Main.ts

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
// Card是一个预先定义好的组件
import Card from './components/Card.vue';

export const app = createApp(App)

// 注册成全局组件(第一个是名字,第二个是组件实例)
app.component('Card',Card)

app.mount('#app')

Card.vue

<template>
  <div class="card">
    <header>
      <div>标题</div>
      <div>副标题</div>
    </header>
    <section>
      <div>内容</div>
    </section>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'
</script>

<style scoped lang="less">
  @border: #ccc;
  .card {
    border: 1px solid @border;
  width: 400px;
  header{
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid @border;
  padding: 5px;
  }
  section{
    padding: 5px;
    min-height: 300px;
  }
  }
</style>

1. 递归组件：由组件调用自身形成，通常在组件中还嵌套着和自身结构相同（必须完全一致）的组件时使用

App.vue(用于Mock数据给子组件)

<template>
    <Tree :data="data"></Tree>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import Tree from './components/Tree.vue'
interface Tree {
    name: string
    checked: boolean
  // children可有可无
    children?: Tree[]
}
const data = reactive<Tree[]>([
    {
        name: '1-1',
        checked: false,
    },
    {
        name: '2-1',
        checked: false,
        children: [
            {
                name: '2-2',
                checked: false,
                children:[
                    {
                        name:'2-3',
                        checked:false,
                    }
                ]
            },
        ],
    },
    {
        name:'3-1',
        checked:true,
    }
])

</script>

<style scoped></style>

Tree.vue

<template>
    <div @click.stop="clickTap(item,$event)" class="tree" v-for="item in data">
        <input v-model="item.checked" type="checkbox" />
        <span>{{ item.name }}</span>
        <!-- 将data再次传入,由于空数组的逻辑结果依然为true,因此直接使用length判断,当length为0时结束渲染 -->
        <Tree v-if="item.children?.length" :data="item?.children"></Tree>
    </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:Tree,e: MouseEvent) => {
    console.log(item,e.target)
}
</script>

<style scoped>
.tree {
    margin-left: 20px;
}
</style>