微信小程序-父子组件通信

153 阅读1分钟

pages/recommend/index.wxml(简称recommend) components/article-item/index.wxml(简称articleList) recommend中使用articleList组件,articleList组件如何获取recommend传递过来的articelList数组?

1、在组建使用的地方,通过属性传递参数

<!--pages/recommend/index.wxml-->
<view>
  <my-article-list articleList="{{articleList}}" msg="{{msg}}"></my-article-list>
</view>

2、在定义组件的地方,找到对应的js文件,通过properties接收

// components/article-list/index.js
Component({
  properties:{
    msg:{
      type:String,
      value:''
    },
    articleList:{
      type:Array,
      value:[]
    }
  }
})

3、在组件模板文件中使用该属性

<!--components/article-list/index.wxml-->
<view>
  <block wx:for="{{articleList}}" wx:key="user_id">
    <my-article-item articleItem="{{item}}" msg="{{msg}}"></my-article-item>
  </block>
</view>

微信小程序入门:

1、组件通信

2、生命周期

3、外部样式类

4、自定义属性

5、事件

6、变量