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);
}