vue通过ref实现子父通信（vue父子组件如何通信）

一 子组件

<template>
  <div>
  {{ msg }}
    </div>
</template>
<script>
      export default {
data() {
  return {
    msg: "hello world~~~"
  }
}
}
  </script>

二 父组件

<template>
  <div id="app">
    <!-- ref的值任意写，只是一个标识，父组件接收子组件的值的时候对应好就行了 -->
    <hello-world ref="ree"></hello-world>
<button @click="getHello">获取helloworld组件中的值</button>
</div>
</template>
<script>
      import HelloWorld from "./components/HelloWorld.vue";
export default {
  components: {
    HelloWorld
  },
  methods: {
    getHello() {
      console.log(this.$refs.ree.msg)
    }
  }
};
</script>