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'}
}