1.父组件

<template>
  <div>
    <div style="font-weight:bold">{{ fatherText }}：{{ toChild }}</div>
    <br />
    <child-data
      @showFatherData="updateFatherData"
      @getFromChild="getFromChild"
      :toChildData="toChild"
    ></child-data>
  </div>
</template>

<script>
import ChildData from "./childData.vue";
export default {
  name: "fatherData",
  //子组件
  components: { ChildData },
  data() {
    return {
      toChild: "Father Data",
      fatherText: "父组件的toChild"
    };
  },
  methods: {
    //触发子组件sendToFather事件
    updateFatherData(data) {
      this.fatherText = "父组件接收子组件的toChild";
      //改变了当前父组件的值
      this.toChild = data.childData;
    },
    getFromChild: function(data, callBack) {
      callBack("从父组件返回的" + data.childData);
    }
  }
};
</script>

2.子组件

<template>
  <div class="child-data">
    <h3 style="font-weight:bold">{{childText}}:{{ curChildData }}</h3>
    <button @click="sendToFather(`Child To Father Data`)">点击将‘Child To Father Data’传递给父组件</button>
    <h3 style="font-weight:bold">{{getDataFromFather}}</h3>
  </div>
</template>
<script>
export default {
  name: "childData",
  // 用来接收父组件传给子组件的数据
  props: ["toChildData"], 
  data(){
    return {
      curChildData:this.toChildData,
      childText:'父组件传递给子组件的toChild',
      getDataFromFather:'点击按钮后接收返回值'
    }
  },
  methods: {
    sendToFather(val) {
      var that=this;
      this.childText='子组件传递给父组件的toChild'
      this.curChildData=val
      var data = {
        childData: val
      };
      //sendToFather事件触发后，使用$emit自动触发showFatherData事件,data为showFatherData的参数，可以有多个
      this.$emit("showFatherData", data); 
      this.$emit("getFromChild",data,val=>{
         that.getDataFromFather=val
      });
      
    }
  }
};
</script>

3.页面初始化

4. 点击按钮后页面变化

注意： 

        在子组件中不能使用如下语法接收从父组件的返回值

//父组件代码 
getFromChild: function(data) {
    return "从父组件返回的" + data.childData
}
//子组件代码
sendToFather(val) {
    var that=this;
    var data = {
        childData: val
    };
    that.getDataFromFather = this.$emit("getFromChild",data);
}