Vue父子通信的问题

VUE组件父子间通信，父组件给子组件传值用props，子组件给父组件传值用this.$emit()方法，下面是详细的示例，希望能对大家有所帮助。
第一部分讲解的是父传子。

//父组件里边的内容
<template>
  <div id="father">
    <p>我是你爸爸我真伟大{{message}}</p>

    <son :sondata="mydata"></son>
  </div>
</template>
<script>
import Son from "./son";
export default {
  data() {
    return {
      message: "养你这么大",
      mydata: "长大要好好孝敬他"
    };
  },
  components: {
    Son
  }
};
</script>
<style lang="less">
</style>
//子组件里边的内容
<template>
  <div>
    <p>
      这是父亲告诉我的,
      <span class="mess">{{sondata}}</span>
    </p>
  </div>
</template>
<script>
export default {
  props: {
    sondata: {
      type: String,
      default: function() {
        return "";
      }
    }
  },
  data() {
    return {};
  }
};
</script>
<style lang="less">
.mess {
  color: red;
}
</style>

用V-bind(简写：)将父组件传的值绑定在子组件中，父组件需要传的具体内容，放在本组件里边的（也就是上边定义的mydata里边），在子组件里边需要接受内容，这里用到了props，设置接受组件内传数据的名字也就是sondata，它的类型是String，有默认的返回值，这些自己设置一下就可以，固定的语法
接下来是第二部分子传父

//子组件
<template>
  <div>
    <p>爸爸我要告诉你，</p>
    <button @click="toFatherData">给爸爸的话</button>
  </div>
</template>
<script>
export default {
  props: {
    sondata: {
      type: String,
      default: function() {
        return "";
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    toFatherData() {
      this.$emit("sendparents", "我已经长大，可以替你分担压力");
    }
  }
};
</script>
<style lang="less">
</style>

//父组件
<template>
  <div id="father">
    <son @sendparents="sendSonData"></son>
    <p>{{sendsonmessage}}</p>
  </div>
</template>
<script>
import Son from "./son";
export default {
  data() {
    return {
      sendsonmessage: ""
    };
  },
  components: {
    Son
  },
  methods: {
    sendSonData(data) {
      this.sendsonmessage = data;
    }
  }
};
</script>
<style lang="less">
</style>

子组件里边创建按钮，定义一个点击事件，点击事件里边用this.$emit方法触发一个自定义事件，并传递一个参数
在父组件的子标签中，监听该自定义事件（sendparents）并添加一个响应该事件的处理方法（sendSonData），将接收到的值赋值给data中的sendsonmessage