Javascript的爷孙通信和组件自调用详解
短信预约 -IT技能 免费直播动态提醒
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>
?爷爷
<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: {
getReply (param) {
this.reply = param
}
}
}
</script>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程网的更多内容!
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
