微信小程序中自定义组件

• 在项目根目录下创建 components 目录, 将所有的组件都放在该目录下, 组件中四个文件的名字都是 index. 注: 当然放在其他目录下, 其他的名字也可以, 包含以下文件和变量的命名, 都只是个人习惯而已

---

组件定义

• /components/index-active-item/index.wxml

  <view data-active-id="{{activeItem.id}}" bind:tap="onGoToDetail">
      <image src="{{activeItem.event_banner}}" mode="scaleToFill"></image>
      <view class="active-title">{{activeItem.sub_title}}</view>
  </view>
  

• /components/index-active-item/index.js
  • 该组件中接收 activeItem 活动列表页显示的数据
  • 同时, 由于需要从活动列表页跳转到活动详情页, 所以在 index.wxml 中绑定 data-active-id 属性, 以及绑定跳转到详情页的方法 bind:tap="onGoToDetail". 注: 绑定属性的时候, 必须是 data 开头的
  • 在 onGoToDetail 方法中的参数 params 中可以获取到上面绑定的 id, 但是小程序会自动将在 index.wxml 中绑定的属性名去掉前面的 data, 并将后面的内容转换成小驼峰命名
  • this.triggerEvent('detail',{id}): 将

  Component({
    properties: {
      // 需要定义要接收的数据的格式和默认值
      activeItem: {
        type: Object,
        value: null
      }
    },
    data: {
      activeItem: {}
    },
    methods: {
      onGoToDetail(params) {
        const id = params.currentTarget.dataset['activeId']
        // 向父组件中传递的数据
        this.triggerEvent('detail',{id})
      }
    }
  });
  

引用组件

1. 在 /pages/index/index.json 中引用组件

   "usingComponents": {
   	"xs-active-item": "/components/index-active-item/index"
   }
   

2. 在 /pages/index/index.wxml 中使用组件

   <xs-active-item 
   	bind:detail="goToActiveDetail" 
   	wx:for="{{activeList}}"
   	wx:key="item.id"
   	activeItem="{{item}}">
   </xs-article-item>
   

3. 在 /pages/index/index.js 中可以获取到子组件中传递过来的参数

   goToActiveDetail(params) {
   	console.log(params)
   }