在做项目过程中,我们会把多个相同的模块做成一个组件,然后供多个页面一起使用,这样可以实现组件复用。下面我来说说如何实现小程序中的父子组件之间的传值。
1、父组件向子组件传值
子组件是通过 properties 来接收父组件传递过来的值
例子:
(1)子组件
1)wxml文件
<!--wxml文件--> <!--components/button/button.wxml-->
<view class="button-con {{type}}">
<view class='btn-text'>{{desc}}</view>
</view>
2)js文件(通过 properties 接收父组件传递过来的值)
// components/button/button.js
Component({
/**
* 组件的属性列表
*/
properties: {
type:String,
desc:String,
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
},
})
(2)父组件
1)在json文件中引入子组件(将 component 设置为true,在 usingComponents 中引入对应的子组件)
{
"component": true,
"usingComponents": {
"cus-button":"../button/button"
}
}
2)wxml文件
<view class="body_bottom">
<cus-button class="btn_bom" type="empty" desc="{{btnvalue[0]}}" bindtap="close"></cus-button>
<cus-button class="btn_bom" type="primary88" desc="{{btnvalue[1]}}" bindtap="ok"></cus-button>
</view>
(3)如果在一个子组件中引入另一个子组件,对应的方法直接写在methods中
// components/dialog/dialog.js
Component({
/**
* 组件的属性列表
*/
properties: { },
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
close(){
console.log('子组件关闭弹出啦');
this.triggerEvent('close');
},
ok(){
this.triggerEvent('ok');
}
},
created(){
console.log(this.data);
}
})
2、子组件向父组件传值
子组件通过 triggerEvent 方法向父组件传值
例子:
(1)子组件
1)wxml文件:
<view class="body_bottom" bindtap="cancel">取消</view>
<view class="body_bottom" bindtap="comfire">确定</view>
2)js文件:
Component({
/**
* 组件的属性列表
*/
properties: {},
/**
* 组件的初始数据
*/
data: {
desc:'关闭'
},
/**
* 组件的方法列表
*/
methods: {
cancel(){
// 不带参数的
this.triggerEvent('cancel');
},
comfire(){
// 带参数的
this.triggerEvent('close',this.data.desc);
}
}
})
(2)父组件
1)现在json文件中引入这个组件,然后在wxml文件中这样写:
扫描二维码关注公众号,回复:
9169518 查看本文章
<cu-button class="btn_bom" bindcancel="cancel"></cu-button>
<cu-button class="btn_bom" bindcomfire="comfire"></cu-button>
2)js文件:
Page({
cancel: function(){
console.log('取消')
},
comfire: function(e){
// e.detail 自定义组件触发事件时提供的detail对象
console.log('确认',e.detail)
}
})