如何实现JavaScript中爷孙组件间的通信及组件自调用的详细方法？

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

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>