注册登录

Vue组件间通信：父子组件通信(2)

上一期我们了解了Vue父子组件间使用Props和$emit自定义事件的方式通信，父子组件间可以很方便的进行数据交互，本文将继续补充父子组件间通信的方式：$refs，我们可以在父组件中使用$refs访问到子组件的方法。

Vue官方文档上说了 ref 被用来给元素或子组件注册引用信息。就是绑定在普通元素上，则获取到这个DOM元素，若是绑定在组件上，则获取到的是这个组件的Vue实例vm。

也就是说可以通过$refs直接调用组件的方法或访问数据， 我们看一个ref来访问组件的例子:

子组件 Com.vue

<template>
    <div>
        <p>{{str}}</p>
        <p>{{messageA}}</p>
        <p>获取父组件的值： {{parentVal}}</p>
    </div>
</template>

<script>
export default {
  data () {
    return {
      str: '睡懒觉中...',
      messageA: 'Helloweba'
    }
  },
  computed: {
    parentVal() {
        return this.$parent.msg;
    }
  },
  methods: {
    doSomething () {
        //to do
        this.str = '是，马上就起床！'
        console.log('hello');
    }
  }
}
</script>
知识兔

父组件main.vue

<template>
    <div>
        <div class="main">
            <h3>父组件</h3>
            <p><button @click="wakeup">呼唤子组件</button></p>
            <hw-com ref="com" style="width: 95%; border: 1px dashed #ccc"></hw-com>
        </div>
    </div>
</template>

<script>
import Com from './Com.vue'

export default {
    components: {
        hwCom: Com,
    },
    data() {
        return {
            msg: 'Welcome!'
        }
    },
    mounted() {
        const com = this.$refs.com;
        console.log(com.str);  //睡懒觉中...
        com.doSomething(); //是，马上就起床！
    },
    created() {
        
    },
    methods: {
        wakeup() {
            
        }
    }
}
</script>
知识兔

我们要在父组件Main.vue中访问子组件Com.vue中的doSomething方法，可以直接在mounted中使用this.$refs.com.doSomething();就能做到。值得注意的是，Vue更新数据是异步的，我们需要等到DOM更新完成，所以使用$ref进行DOM操作的时候，需要将调用代码放在mounted中，或者放在created的$nextTick(() => {})中：

created() {
        this.$nextTick(() => {
             const com = this.$refs.com;
             com.doSomething();
        });

    },
知识兔

此外，$refs 也不是响应式的，因此不应该试图用它在模板中做数据绑定。

$children和$parent

Vue官方文档上说了，使用$parent和$children也可以访问组件的实例，拿到实例代表什么？代表可以访问此组件的所有方法和data。

在父组件Main.vue中，点击按钮触发wakeup()方法，通过$children来访问子组件中的messageA属性。

methods: {
        wakeup() {
            this.$children[0].messageA = 'HIII';
            this.msg = 'Hi hi hi...';
        }
    }
知识兔

而在子组件Com.vue中，可以使用$parent来访问父组件中的数据。

computed: {
    parentVal() {
        return this.$parent.msg;
    }
},
知识兔

父组件访问子组件使用$refs即可，对于$children和$parent最好不要使用了。

下一期我们介绍兄弟组件间的通信方式，敬请关注。

计算机