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

父组件传值给子组件

有两个文件,各自名为: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 事件,需要在页面处点击渲染的数据才能看到。

 

 

 

 

 

如果有问题,请大佬指出!

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

上一篇:入坑微信小程序必经之路(四)时间组件


下一篇:vue:动态样式-(九宫格布局区域块不同样式根据所选不同模板渲染)