小程序中使用组件和插槽

2021-4-13 1:40:22

小程序中页面和组件是完全不同的两个东西，这里跟Vue还是有很大的差别的。最近写小程序用到了，就做个记录。

定义组件

创建组件的时候使用小程序开发工具中的“新建Components”，就可以创建组件四件套。

其中，组件的js文件中，构造方法和页面是不一样的。

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    
  },

  /**
   * 组件的初始数据
   */
  data: {
    
  },
  /**
   * 组件的方法列表
   */
  methods: {
    
  }
})

组件属性

和Vue相同的是，组件中data和properties是区分开的。二者的区别是“在使用组件时需要不需要从父组件/页面中传入”。data中存放内部的值，是不需要从父页面传入的；properties中存放组件属性，这里的值是可以从父页面传入的。

本文中我们想要开发一个“设置”页面。在这个页面中，每一行设置项都使用封装的组件。每个组件需要标题、图标、右侧的文字内容或图标。从而我们描述如何在小程序中封装组件和使用插槽，还有父页面和子组件之间通信。

本文中使用page代表页面，使用components代表组件。使用wxml代表页面/组件文件，使用wxss代表样式文件，使用js代表js文件。

<!-- page.wxml -->
<list-card
    title="设置用户信息"
    icon="flower-o"
></list-card>

<!-- component.js -->
properties: {
    title: {
      type: String,
      value: ""
    },
    icon: {
      type: String,
      value: ""
    }
}

从代码中可见，properties中定义的值可以被父页面中的组件标签传入。在定义properties时，可以指定类型和默认值。

插槽

slot是Vue中的特性，既然提到了组件，那么小程序中就也有插槽的特性。很幸运地，小程序中，插槽和Vue中的插槽用法大致相同。

例如在上面的例子中，我们需要使用插槽来自定义右侧的图标或文字。

<!-- page.wxml -->
<list-card
    title="设置用户信息"
    icon="flower-o"
>
    <van-icon slot="subtitle" name="arrow" />
</list-card>

<!-- components.wxml -->
<view class="card">
    <slot name="subtitle"></slot>
</view>

父页面中给组件绑定事件

也就是在组件中调用父页面中的方法

我们需要在组件中预置点击事件，触发事件时主动调用父组件中的方法。

<!-- components.wxml -->
<view class="card" bindtap="onCardClick"></view>

组件中的点击事件这样写，从而触发父页面中，写在组件属性中的事件。

// components.js
onCardClick() {
  this.triggerEvent("click", {})
}

看组件js的代码意思大概是触发当前组件的click事件，在父页面中，我们需要给组件指定一个bindclick属性。

<!-- page.wxml -->
<list-card
  title="关于"
  icon="warning-o"
  bindclick="setUserInfo"
>

不知道小程序这样设计是为了什么，明明在组件中指定的是click事件，但在父页面中得在这个词前面再加bind。不得不说这样的设计惊为天人。

// page.js
setUserInfo() {
  // 在这写具体的逻辑
}

父页面中调用组件的方法

首页中的tab页我使用组件方式实现，使用tab切换的页面都使用组件实现，首页里套这些组件。

现在需要在列表触底时触发组件的列表翻页事件。只需要在父页面中取到组件的节点，直接调用节点下的方法即可。

// page.js
// onReachBottom 是小程序的页面触底事件
onReachBottom() {
  if (this.data.tabbarActive == 'home') {
    const homepage = this.selectComponent('#homepageComponent')
    homepage.onPagePullUp()
  }
}

// components.js
/**
  * 当页面上拉加载
  * 从父页面index触发
  */
onPagePullUp() {
  // 里边是具体的上拉加载逻辑
  const _this = this
  _this.setData({
    ["where.page"]: _this.data.where.page + 1
  })
  _this.getList()
},

总结

小程序真好玩。