这篇文章主要介绍了Javascript爷孙通信和组件自调用的方法的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Javascript爷孙通信和组件自调用的方法文章都会有所收获，下面我们一起来看看吧。
父组件
计算
安全
数据库
网络和加速
企业服务
<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>
????爷爷
<br>
<div>GrandSon的回复：{{reply}}</div>
<father :msg1="msg1" :msg2="msg2" @getReply="getReply"></father>
</div>
</template>
<script>
import Father from './father.vue'
export default {
components: { Father },
data () {
return {
msg1: '1️⃣我是GrandFather，把第二条传给GrandSon',
msg2: '2️⃣GrandSon你好，我是GrandFather',
reply: '' // 接收来自GrandSon的消息
}
},
methods: {
/* 将获得的数据绑定到data中，便于视图层渲染 */
getReply (param) {
this.reply = param
}
}
}
</script>关于“Javascript爷孙通信和组件自调用的方法”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Javascript爷孙通信和组件自调用的方法”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
