小程序之父子组件传值详解
父传子:
1.在pages的同级新建components文件夹,并在components文件夹下新建自定义组件名
2.在父组件的"组件名.json"中引入子组件组件(图如下)
{
"usingComponents": {
"tabs":"../../components/tabs/tabs"
}
}
其中"tabs":"…/…/components/tabs/tabs"为已经自定义好的组件名和组件路径
3.在子组件的"组件名.json"中添加如下代码,确定子组件
{
"component": true,
"usingComponents": {}
}
4.在父组件的.wxml文件中定义组件名以及组件值
5.在父组件的.js文件中中定义数据
6.在子组件中接收数据
properties: {
// 要接受数据的名称
// aaa:{
// // type 表是要接受的数据的类型
// type:String,
// //value 默认值
// value:""
// }
tabs:{
type:Array,//
value:[]
}
},
保存,观察数据显示效果
子传父:
子传父是通过事件来触发的
1.在子组件中通过 this.taiggerEvent(“父组件自定义的事件名”,要传递的参数) 来通过事件传递数据给父组件
2.在父组件页面文件绑定事件
3.在父组件.js文件定义方法,实现效果
不足之处请大家指出