1.父组件向子组件传值
首先,如果父组件想使用子组件,需要先在父组件中的.json文件中引入该子组件,假如我创建了一个叫做getAuth的子组件,那么在父组件中应该这样引入:
{
"usingComponents": {
"getAuth": "/components/getAuth/index"
}
}
父组件向子组件传值,需要子组件先定义对应的属性来接受从父组件传过来的值,我在子组件的properties中定义了如下几个属性:
Component({
properties: {
show: {
type: Boolean,
value: false,
},
content: {
type: String,
value: '需要获取您的头像、昵称等'
},
type: {
type: Number,
value: 1,
}
},
data: {
},
methods: {
// 去授权
getAuth() {
this.triggerEvent('getAuth')
},
}
})
需要说明的是:type为属性的数据类型,value为默认值,如果父组件不传对应的值,则会使用默认值
父组件需要这样使用子组件并传值:
<getAuth show="{{authUserInfoShow}}" bindgetAuth="getUserInfo" />
2.子组件向父组件传值
子组件向父组件传值是通过事件来实现的,如上面的子组件代码中,使用this.triggerEvent(‘事件名’)分发事件,父组件则bind+子组件事件名绑定事件来达到子向父传值的目的