子组件:把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'}
}

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐