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>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注编程宝库的更多内容!

 区别区别函数组件类组件生命周期无有this无有state无有改变stateReact Hooks:useStatethis.setState()性能高(不用实例化)低(需要实例化)&n ...