vue2中子组件向父传值$emit方法的使用
vue2中子组件向父传值$emit方法的使用。
·
子组件:把choiceIndex的值传递给使用这个组件的父页面
data() {
return {
choiceIndex: 0,
}
},
// 子组件需要传递choiceIndex的值给父
btnChoiceClick: function(index) {
//其中sonChoiceClick为父组件定义函数,this.choiceIndex为需要传递参数
this.$emit('sonChoiceClick',this.choiceIndex)
},
使用$emit方法,并自定义一个方法sonChoiceClick。
this.$emit("function",param) 其中function为父组件定义函数,param为需要传递参数
父页面这里在使用这个组件时绑定一个事件:
<view class="out">
<choice-selected :choiceIndex="choiceIndex"
//绑定这个子组件$emit的方法
@sonChoiceClick="fatherChoiceClick">
</choice-selected>
</view>
fatherChoiceClick(choindex) {
this.choiceIndex = choindex
console.log("选择的地址为:", this.choiceIndex);
},
父页面就能拿到子组件传过来的this.choiceIndex的值。
重写一下,以前写的太复杂了,自己看了都理解不了。😒
子传父: $emit传递一个参数的写法:
//这是子组件
//this.$emit("function",param) 其中function为父组件定义函数,param为需要传递参数
this.$emit('getData','100')
//这是父组件
<child @getData="getData"></child>
getData(data){
console.log(data) // '100'
}
$emit传递多个参数的写法:
//这是子组件
this.$emit('getData','100','200')
//这是父组件
// 接收的时候要传 arguments 参数
<child @getData="getData(arguments)"></child>
getData(data){
console.log(data[0],data[1]) // '100' '200'
}
$emit传递多个参数的另一种写法:
//这是子组件
let obj = {
data1: '100',
data2: '200'
}
this.$emit('getData',obj)
//这是父组件
<child @getData="getData"></child>
getData(data){
console.log(data) // {data1:'100',data2:'200'}
}
更多推荐
已为社区贡献2条内容
所有评论(0)