一、首先,子组件定义好需要传递的值
子组件在自身的data中定义号需要传递的值
data() {
return {
addMsgdata: {
name: "",
age: "",
address: "",
},
};
},
二、将值通过$emit进行传递
子组件在需要触发传值给父组件的事件中,设置emit,通过emit将事件和值抛给父组件。
addMsg() {
this.$emit("addMsg", this.addMsgdata);
//传递后需做置空处理,不然会导致子组件与父组件的值绑定改变
this.addMsgdata = {
name: "",
age: "",
address: "",
};
this.$Message["success"]({
background: true,
content: "添加成功",
});
},
三、父组件进行接收
父组件通过标签绑定的形式绑定子组建emit的时间方法,再通过构造响应的事件,事件的参数就是子组件传递的值。
<addMsg
v-on:addMsg="addMsg" //通过on在子组件中进行事件绑定接收
></addMsg>
addMsg(val) {
//val参数就是子组件传递的值
let data = val;
//值的使用
this.data.push(data);
},