微信小程序父子间传值（记录自己遇到的错误）

父组件传值给子组件

有两个文件，各自名为：A 文件和 B文件，其中 A 文件为父组件，B 文件为子组件。

1、在父组件中引用子组件

1.1、在父组件 json 中导入子组件

{
　"usingComponents": {
 　　"B": "../../components/B/B",
 　},
}

 左边代表子组件的名称（可自定义），右边是子组件的路径。

 

2、在父组件 .wxml 中，子组件的引用处，绑定一个属性（text），并传递想要给子组件的值

<B text="我是父组件，传值给子组件"></B>

也可以在父组件的 .js 的 data 里面声明数据，并传给子组件。如：

Page({
    data: {
    　　tabs: [      　　
　　　　　　{id: 0,value: '综合',isActive: true},
      　　{id: 1,value: '销量',isActive: false},
      　　{id: 2,value: '价格',isActive: false},
    　　]
  },
})

<B tabs="{{tabs}}" text="我是父组件，传值给子组件"></B>

tabs="{{tabs}}"  左边是自定义传给子组件的值的名称，右边是值，如果是在 data 里面拿到，那么要加 {{}}才行。
可以传多个值给子组件。

3、在子组件中的 .js 中使用 properties 获取值。通过 onReady 函数，使用 this.data.tabs 就可拿到数据。

Component({
  properties:{
    text:{text:String},
    tabs:{
      type: Array,//type 声明拿到的类型，必须要加
      value: [] //value 是默认值，可以不加
    }
  },
})

4、在子组件 .wxml 中渲染从父组件拿过来的值。

<view wx:for="{{tabs}}" wx:key="id">
  {{item.value}}
</view>
<view>
  {{text}}
</view>

注意：

（1）子组件的 .js 的 Page 必须改为 Component ，通过 properties  才能拿到从父组件拿到数据。否则拿到不到数据。

（2）在子组件的调试器里，如果 Component Data 里面如果没有要的数据，那就证明子组件拿不到父组件的数据。

 

（3）如果子组件拿不到父组件的数据，那么就要看下父子间的单词有没有拼错，看下父组件的 json 里面的子组件路径是否错误，

看下父组件引用子组件的名字是否错误，看下父组件传入的名称子组件是否拿错了，看下 ：注意的（1）；等等……

子组件传值给父组件

1、首先在子组件 .wxml 上定义事件

<view wx:for="{{tabs}}" wx:key="id" bindtap="myTab">
  {{item.value}}
</view>

注意：bindtap 是点击事件。

2、子组件在需要传值时，使用 trriggerEvernt 传给父组件一个事件，并传递想要给父组件的值。在子组件的 .js 里面使用方法，必须在 methods 方法里面使用（父组件不需要）。methods 与 

properties 平级。【this.triggerEvent("自定义事件名",{需要传递给父组件的值})】

methods:{
  myTab(){
    this.triggerEvent("myEvent", {son: "子组件给父组件传值"})
  }
}

3、在父组件的 .wxml 中绑定自定义事件

<B tabs="{{tabs}}" text="我是父组件，传值给子组件" bindmyEvent="handleMyEvent"></B>

左边：bind + 子组件 this.triggerEvent里面的 "自定义事件名",右边重新命名一个事件名称（自定义命名）。

4、在父组件 .js 文件中与 data 平级，使用  handleMyEvent 事件，并传入 e 。

handleMyEvent(e){
    console.log(e);
  }

在 e.detail 里面就能拿到从子组件传过来的值了。

注意：由于用的是 bindtab 事件，需要在页面处点击渲染的数据才能看到。

如果有问题，请大佬指出！