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

  <div id="app">
    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 id="app">
    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