vue 朝花夕拾系列（5）- 组件通信$parent/$children,$refs/$root获取Vue组件实例

vue 朝花夕拾系列（5）主要收录的就是vue组件间通信的几种方式，如
1.props、$emit/$on
2.vuex
3.$parent/$children
4.$refs
5.$root
6.$attrs/$listeners
7.provide/inject
8.中央事件bus(eventBus)
9.路由传参

本文主要阐述第三、四、五：通过$parent/$children,$refs/$root获取组件实例，从而获取实例上绑定的属性和方法…

$parent / $children与 ref

• ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素;如果用在子组件上，引用就指向组件实例
• $parent / $children：访问父 / 子实例
• $root获取根实例

兄弟组件通信就不是很方便了,可能要借助eventBus或者顶层状态vuex来进行通信…

ref

• 注意定义的时候使用的是ref
• 在组件里面用的时候是$refs[‘refName’]获取组件的vue实例

    // component-a 子组件
    export default {
        data () {
            return {
                title: 'Vue.js'
            }
        },
        methods: {
            sayHello () {
                window.alert('Hello')
            }
        }
    }

    // 父组件
    <template>
    <component-a ref="comA"></component-a>
    </template>
    <script>
        export default {
            mounted () {
                const comA = this.$refs.comA;
                console.log(comA.title); // Vue.js
                comA.sayHello(); // 弹窗
            }
    }
</script>

$parent:父实例/$children:子实例

• 注意children和parent是父链/子链,也就是如果是多层级的话可以通过this.$parent[0].$parent[1]…这种链式的方式一直获取组件链上的实例对象，但是不保证顺序。

//父组件
 mounted(){
 console.log(this.$children) 
 //可以拿到 一级子组件的属性和方法
 //所以就可以直接改变 data,或者调用 methods 方法
 }

 //子组件
 mounted(){
 console.log(this.$parent) //可以拿到 parent 的属性和方法
 }

$root

• 最后所有组件都是挂载到根实例上

    // 父组件
mounted(){
  console.log(this.$root) //获取根实例,最后所有组件都是挂载到根实例上
  console.log(this.$root.$children[0]) //获取根实例的一级子组件
  console.log(this.$root.$children[0].$children[0]) //获取根实例的二级子组件
}