Vue父子組件傳值之——訪問根組件$root、$parent、$children和$refs

 Vue組件傳值除了prop和$emit，我們還可以直接獲取組件對象：

根組件： $root // 單一對象

表示當前組件樹的根 Vue 實例，即new Vue({...根組件內容})。
如果當前實例沒有父實例，此實例將會是其自己。
Vue子組件可以通過$root屬性訪問父組件實例的屬性和方法

父組件：$parent // 單一對象

 $parent表示父組件的實例，該屬性只讀

子組件：$children // 數組

$children表示當前實例的直接子組件。需要注意$children並不保證順序，也不是響應式的。如果正在嘗試使用$children來進行數據綁定，考慮使用一個數組配合v-for來生成子組件，並且使用Array作爲真正的來源

其他獲取組件方法： $refs

$refs

 

栗子：

組件順序：new Vue > app.vue > getComponentsVal.vue > (child-one.vue + child-tow.vue + <h2>three</h2>)

1分析配圖：

 

 

2代碼實現：

首先我們列出根組件和父組件：

根組件：（可以看到，這裏引入了組件App）

new Vue({
  components: { App },
  template: '<App/>',
  data: {msg: '#app'} // #app
}).$mount('#app20190124')

父組件：（這裏只列出了msg內容，它就是上圖中的App.vue組件塊；並且引入了getComponentsVal.vue組件）

data () {
    return {
      msg: 'App' // App
    }
}

然後我們着重分析當前測試本身和它的子組件： 

當前測試的組件——template：當前組件”getComponentsVal.vue”包含了兩個子組件和一個h2標籤

<template>
    <div>
        <h2>我是"App"的子組件，我的根組件Vue#app20190124</h2>
        <child-one ref="one"/>
        <child-two ref="two"/>
        <h2 ref="three">three</h2>
    </div>
</template>

 當前測試的組件——的兩個子組件（這裏沒有import，而是直接寫在components裏）：

  components: {
    childOne: {
      name: 'child-one',
      template: '<h2>{{msg}}</h2>',
      data () {
        return {
          msg: 'child-one'
        }
      },
      mounted () {
        console.log(this.$parent.msg)
      }
    },
    childTwo: {
      name: 'child-two',
      template: '<h2>{{msg}}</h2>',
      data () {
        return {
          msg: 'child-two'
        }
      },
      mounted () {
        console.log(this.$parent.msg)
      }
    }
  },

 當前測試的組件——的測試結果：

  mounted () {
    console.group('根組件、父組件-------------')
    console.log(this.$root) // 根實例對象： {Vue#app}
    console.log(this.$root.msg) // #app
    console.log(this.$parent) // 父組件實例對象： {Vue父}
    console.log(this.$parent.msg) // App
    console.groupEnd()
    console.group('子組件--------------------')
    console.log(this.$children) // 所有子級數組： [VueComponent, VueComponent]
    console.log(this.$children[0].msg) // 獲取第一個子級msg： child-one
    console.log(this.$children[1].msg) // 獲取第二個子級msg： child-two
    console.groupEnd()
    console.group('$refs--------------------')
    console.log(this.$refs) // 包含所有refs的對象：{one: VueComponent, two: VueComponent, three: h2}
    console.log(this.$refs.one) // 子級組件： child-one
    console.log(this.$refs.two) // 子級組件： child-two
    console.log(this.$refs.three) // dom元素： <h2>three</h2>
    console.groupEnd()
  }

3執行結果圖：

  4當前測試的組件——的全部代碼：

<template>
    <div>
        <h2>我是"App"的子組件，我的根組件Vue#app20190124</h2>
        <child-one ref="one"/>
        <child-two ref="two"/>
        <h2 ref="three">three</h2>
    </div>
</template>

<script>
export default {
  name: 'getComponentsVal',
  data () {
    return {
      msg: 'getComponentsVal'
    }
  },
  components: {
    childOne: {
      name: 'child-one',
      template: '<h2>{{msg}}</h2>',
      data () {
        return {
          msg: 'child-one'
        }
      },
      mounted () {
        console.log(this.$parent.msg)
      }
    },
    childTwo: {
      name: 'child-two',
      template: '<h2>{{msg}}</h2>',
      data () {
        return {
          msg: 'child-two'
        }
      },
      mounted () {
        console.log(this.$parent.msg)
      }
    }
  },
  mounted () {
    console.group('根組件、父組件-------------')
    console.log(this.$root) // 根實例對象： {Vue#app}
    console.log(this.$root.msg) // #app
    console.log(this.$parent) // 父組件實例對象： {Vue父}
    console.log(this.$parent.msg) // App
    console.groupEnd()
    console.group('子組件--------------------')
    console.log(this.$children) // 所有子級數組： [VueComponent, VueComponent]
    console.log(this.$children[0].msg) // 獲取第一個子級msg： child-one
    console.log(this.$children[1].msg) // 獲取第二個子級msg： child-two
    console.groupEnd()
    console.group('$refs--------------------')
    console.log(this.$refs) // 包含所有refs的對象：{one: VueComponent, two: VueComponent, three: h2}
    console.log(this.$refs.one) // 子級組件： child-one
    console.log(this.$refs.two) // 子級組件： child-two
    console.log(this.$refs.three) // dom元素： <h2>three</h2>
    console.groupEnd()
  }
}
</script>