父子通信的另一种方法(ref/$refs)

首先ref这个属性如果写在子组件标签上，就可以访问子组件的数据和方法了

// 子组件
export default {
  data() {
    return {
      name: '我是子组件'
    }
  },
  methods: {
    sayHi() {
      console.log('say hi')
    }
  }
}

// 父组件
<template>
  <Child ref="child"></Child>
</template>

<script>
import Child from './child.vue'
export default {
  components: {Child},
  mounted() {
    console.log(this.$refs.child.name)   // '我是子组件'
    this.$refs.child.sayHi()   // 'say hi'
  }
}
</script>