Javascript的爷孙通信和组件自调用详解
作者：時間不夠以後
这篇文章主要为大家详细介绍了Javascript的爷孙通信和组件自调用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
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: {
/* 将获得的数据绑定到data中，便于视图层渲染 */
getReply (param) {
this.reply = param
}
}
}
</script>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!