vue3 - 11.全局组件，局部组件，递归组件

啦啦朵朵

已于 2022-10-22 21:29:46 修改

阅读量204

点赞数

文章标签： vue.js javascript 前端

于 2022-10-22 21:17:45 首次发布

本文链接：https://blog.youkuaiyun.com/qq_34111842/article/details/127467222

版权

本文探讨Vue3中的组件使用，包括如何注册和使用全局组件、在特定模块中定义和调用局部组件，以及如何实现递归组件以渲染树形结构数据。通过实例代码展示了在main.ts中创建全局组件，在box.vue和index.vue中定义和应用局部组件，以及tree.vue子组件的递归渲染方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全局组件：

com.vue

<template>
    <div>
        我是com全局组件
    </div>
</template>
<script setup lang='ts'>
    import { ref } from 'vue'
</script>

main.ts

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import com from './components/com.vue'

const app = createApp(App)

app.component('Com',com) // 第一个参数是自定义组件名称，第二个参数是你当前的组件名称

app.use(createPinia())
app.use(router)

app.mount('#app')

局部组件：

box.vue

<template>
    <div>
        我是局部组件
    </div>
</template>
<script setup lang='ts'>
    import { ref } from 'vue'
</script>
<style scoped>
</style>

index.vue

<template>
  <div>
    <box />
  </div>
</template>
<script setup lang='ts'>
  import box from '../components/box.vue'
</script>
<style scoped>
</style>

递归组件：

比如我们实现一个tree数的渲染

index.vue 父页面：

<template>
  <div>
    <Tree :data="data" @on-click="handleTreeItem" />
  </div>
</template>
<script setup lang='ts'>
  import { reactive, ref } from 'vue'
  import Tree from '../components/tree/tree.vue'
  type TreeList = {
    name: string,
    icon?: string,
    children?: TreeList[] | []
  }
  const data = reactive<TreeList[]>([
    {
      name: "no.1",
      children: [
        {
          name: "no.1-1",
          children: [
            {
              name: "no.1-1-1"
            }, {
              name: "no.1-1-2"
            }, {
              name: "no.1-1-3"
            }
          ]
        }, {
          name: "no.1-2",
          children: [
            {
              name: "no.1-2-1"
            }, {
              name: "no.1-2-2"
            }
          ]
        }
      ]
    },{
      name: "no.2",
      children: [
        {
          name: "no.2-1",
          children: [
            {
              name: "no.2-1-1"
            }
          ]
        }, {
          name: "no.2-2",
          children: [
            {
              name: "no.2-2-1"
            }
          ]
        }
      ]
    }
  ])
  const handleTreeItem = (data:TreeList) => {
    console.log(data)
  }
</script>

tree.vue 子组件：

<template>
    <div style="margin-left:20px;">
        <div v-for="(item,index) in data" @click.stop="handleTree(item)">
            {{item.name}}
            <treeItem v-if="item?.children?.length" :data="item.children" @on-click="handleTree" />
        </div>
    </div>
</template>
<script setup lang='ts'>
    import { ref } from 'vue'
    type TreeList = {
        name: string,
        icon?: string,
        children?: TreeList[] | []
    }
    type Props = {
        data?: TreeList[]
    }
    defineProps<Props>()

    const emits = defineEmits(['on-click'])

    const handleTree = (item:TreeList) => {
        // console.log(item)
        emits('on-click',item)
    }

</script>
<script lang="ts">
    export default {
        name:"treeItem"
    }
</script>