【vue】中 $parent 和 $children 的使用方法

  <div >
    A{{msg}}
    <my-button :msg="msg"></my-button>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.common.dev.js"></script>

  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: '100'
      },
      mounted () {
        console.log(this.$parent, '父') // 没有父组件
        console.log(this.$children, '子') // 99组件
      },
      components: {
        'MyButton': {
          template: `<div>B<my-radio></my-radio></div>`,
          data () {
            return {
              msg: '99'
            }
          },
          mounted () {
            console.log(this.$parent, '父') // 100组件
            console.log(this.$children, '子') // 88组件
          },
          components: {
            'MyRadio': {
              template: `<div>C</div>`,
              data () {
                return {
                  msg: '88'
                }
              },
            },
          },
        },
      }
    })
  </script>

 

$children 官方介绍：

当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

 

$parent 官方介绍：

当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。

 

既然可以获取到组件的实例，那么就可以调用组件的属性或是方法进行操作

  <div >
    A{{msg}}
    <my-button :msg="msg"></my-button>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.common.dev.js"></script>

  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: '100'
      },
      methods: {
        handleClick () {
          console.log('点击事件')
          this.$children.forEach(child => {
            child.todo()
          })
        }
      },
      components: {
        'MyButton': {
          template: `<div @click="$parent.handleClick">B</div>`,
          data () {
            return {
              msg: '99'
            }
          },
          methods: {
            todo () {
              console.log('todo事件')
            }
          },
        },
      }
    })
  </script>

$children 是一个数组，是直接儿子的集合，关于具体是第几个儿子，那么儿子里面有个 _uid 属性，可以知道他是第几个元素，是元素的唯一标识符，根据这个属性，我们可以进行其他的操作

 

关于父子通讯的方式有很多种，那么其中就包含了$parent 和 $children