小程序之父子组件传值详解

小程序之父子组件传值详解

父传子：

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文件定义方法，实现效果

不足之处请大家指出

---