如何详细解析JavaScript中组件间的爷孙级通信与自动调用机制？

本文共计502个文字，预计阅读时间需要3分钟。

1. 组件自定义调用，包含父组件、template、div、detail-list：list=categoryList/detail-list /div/templatescriptimport DetailList from './detailList.vue'export default { components: { DetailList }, data() { return { categoryList: [ { tit: } ] } }}

1.组件自己调用自己

父组件

<template> <div> <detail-list :list="categoryList"></detail-list> </div> </template> <script> import DetailList from './detailList.vue' export default { components: { DetailList }, data () { return { categoryList: [ { title: '1', children: [ { title: '1-1' }, { title: '1-2' }, ] }, { title: '2', children: [ { title: '2-1' }, { title: '2-2' }, ] } ] } } } </script>

子组件

<template> <template> <div> <!--递归组件的应用===》可以通过组件命名来自己使用自己的组件--> <div class="item" v-for="(item, index) in list" :key="index"> <div class="item-title border-bottom"> <span class="item-title-icon"></span> {{ item.title }} </div> <div v-if="item.children" class="item-children"> <detail-list :list="item.children"></detail-list> <!-- //自己使用自己的组件detailList --> </div> </div> </div> </template> <script> export default { name: 'DetailList', //组件命名 props: { list: Array, }, data() { return {} }, } </script>

爷孙通信

grand.vue

<template> <div> <detail-list :list="categoryList"></detail-list> </div> </template> <script> import DetailList from './detailList.vue' export default { components: { DetailList }, data () { return { categoryList: [ { title: '1', children: [ { title: '1-1' }, { title: '1-2' }, ] }, { title: '2', children: [ { title: '2-1' }, { title: '2-2' }, ] } ] } } } </script>

father.vue

<template> <template> <div> <!--递归组件的应用===》可以通过组件命名来自己使用自己的组件--> <div class="item" v-for="(item, index) in list" :key="index"> <div class="item-title border-bottom"> <span class="item-title-icon"></span> {{ item.title }} </div> <div v-if="item.children" class="item-children"> <detail-list :list="item.children"></detail-list> <!-- //自己使用自己的组件detailList --> </div> </div> </div> </template> <script> export default { name: 'DetailList', //组件命名 props: { list: Array, }, data() { return {} }, } </script>

chidren.vue

<template> <div>