父传子参数
父页面定义参数group_options,子页面在props通过options参数接收
父页面调用子页面方法
父页面执行this.$invoke('Select2', 'close'),其中Select2子组件名,close子组件页面定义的方法名
子页面传参给父页面或调用父页面方法
子组件执行语句,this.$emit('funGroup', e);
父组件执行语句,<Select2 @funGroup.user="funGroup"></Select2>
其中funGroup为父组件作为接受函数,e为要传递的参数名,
注意:wepy父组件中,传变量 :GroupName.sync="GroupName" (需要加.sync)
接受方法:@funGroup.user="funGroup"(需要加.user)
<template>
<view @tap="openClose">
<Select2
:options.sync="group_options"
:GroupName.sync="GroupName"
@funGroup.user="funGroup"></Select2>
</view>
</template>
import Select1 from './Select1'
export default class DataSts extends wepy.component {
components = { Select2 }
data = {
group_options: [],
GroupName: '',
}
methods = {
funGroup (e) {
console.log(e)
//打印结果为123,这里可以做为子组件想要父组件执行某事件
this.$apply()
},
openClose () {
//父组件调用子组件方法,方法名close,组件名Select2
this.$invoke('Select2', 'close')
},
}
子页面
<template>
<view @tap="optionTap" >
</template>
</view>
props = {
options: {
type: Array,
value: []
},
GroupName: {
type: String,
value: ''
},
}
methods = {
// 此方法供父组件调用
close () {
this.isShow = false
this.$apply()
}
optionTap () {
//点击optionTap 方法会调用父方法,并传参e,在父组件中可以接受参数
var e='123'
this.$emit('funGroup', e);
},
}