子传父
子组件里 通过$emit('自定义事件名',变量1,变量2)触发 事件
父组件@自定义事件名='事件名'监听事件
触发事件后, 通过$emit来触发 父组件 绑定在子组件标签上的 自定义事件
参数1: 要触发的事件
参数2: 要传递的值
子组件方法里 this.$emit('sendfather',val1,val2)触发自定义事件
父组件里<child @wyf="getMsgFromSon"></child>
1.先在子组件中有一个数据
let one ={
template:`#one`,
data(){
return {
mes:'数据发送父组件',
}
}
}
2.在子组件的视图层写上一个按钮,并添加一个点击方法:
<template id="one">
<div>
<h1>我是子组件one</h1>
<button @click="add()">发送数据给父组件</button>
</div>
</template>
methods:{
add(){
// 这里前面的名字是自定义的,代表发送数据
// 后面的是要发送的数据
this.$emit('getmes',this.mes)
//只要这个事件触发了,数据就被发送出去了
}
}
3.在父组件中写上一个方法,并在根组件的视图层上使用子组件的地方绑定这个方法:
data:{
message:''
},
methods:{
// 此时这个data就是发送过来的子组件的数据
setmes(data){
//把数据赋值自己数据中心的message
this.message = data;
console.log(this.message);
}
<!-- 绑定这个自定义的名字为父组件的方法 -->
<one @getmes="setmes"></one>
在根组件渲染这个数据,当点击按钮时: