微信小程序开发：自定义标签卡组件实现数据双向绑定

2023-09-06 05:58:30

微信小程序自定义组件：标签卡（子组件与父页面双向绑定）

随着微信小程序开发的不断深入，开发人员对自定义组件的需求越来越强烈。自定义组件不仅可以提高代码复用率，还能提升开发效率和维护性。在这篇文章中，我们将重点介绍如何开发一个标签卡自定义组件，并实现组件与父页面的双向绑定。

一、标签卡自定义组件的封装

1. 创建组件文件

在项目目录下创建文件 tag-card.wxml，编写组件模板代码：

<view class="tag-card" bindtap="onTap">
  <view class="tag-card-content">{{data.content}}</view>
</view>

创建文件 tag-card.js，编写组件逻辑代码：

Component({
  properties: {
    data: Object, // 接收父页面传递的数据
  },
  methods: {
    onTap: function () {
      // 触发事件，将数据传给父页面
      this.triggerEvent('click', { data: this.data });
    },
  },
});

2. 使用组件

在父页面 index.wxml 中使用组件：

<tag-card data="{{tagData}}" bind:click="onTagClick"></tag-card>

在父页面 index.js 中处理事件：

onTagClick: function (e) {
  console.log(e.detail.data); // 输出标签卡的数据
},

二、组件与父页面双向绑定

1. 在组件中使用 setData

在组件中，可以通过调用 this.setData 方法更新组件内部的数据，从而实现与父页面的双向绑定。

this.setData({
  data: {
    content: '新内容'
  }
});

2. 在父页面中监听组件的 data 变化

在父页面中，可以使用 watch 方法监听组件的 data 变化，从而及时响应组件内部的数据更新。

watch: {
  'tagData.content': function (newVal, oldVal) {
    console.log('标签卡数据更新：' + newVal);
  }
}

三、实例：使用标签卡实现多选标签

1. 父页面代码

Page({
  data: {
    tagList: [{id: 1, name: '标签1'}, {id: 2, name: '标签2'}, {id: 3, name: '标签3'}],
    selectedTags: [],
  },
  onTagClick: function (e) {
    let data = e.detail.data;
    let selectedTags = this.data.selectedTags;

    // 更新父页面数据
    if (selectedTags.includes(data.id)) {
      selectedTags.splice(selectedTags.indexOf(data.id), 1);
    } else {
      selectedTags.push(data.id);
    }
    this.setData({
      selectedTags: selectedTags
    });
  },
});

2. 组件代码

Component({
  properties: {
    data: Object, // 接收父页面传递的数据
  },
  methods: {
    onTap: function () {
      // 更新组件内部数据
      this.setData({
        data: {
          active: !this.data.active
        }
      });

      // 触发事件，将数据传给父页面
      this.triggerEvent('click', { data: this.data });
    },
  },
});