# 自定义组件

官方描述:

  • 将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用
  • 将复杂的页面拆分成多个低耦合的模块,有助于代码维护

其实与 vue2 的组件类似,只不过在 vue2 中更加强调的是父子、兄弟关系。

版本限制:

  所有自定义组件相关特性都需要基础库版本 1.6.3 或更高

# 一、组件与页面

# 1、组件注册

全局注册:

  • app.json
{
  "pages": [],
  "window": {},

  // 引入组件
  "usingComponents": {
    "table-vant": "/components/table/table"
  },

  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

局部注册:

  • 页面.json 文件
{
  // 默认时
  // "usingComponents": {}

  // 引入组件
  "usingComponents": {
    "table-vant": "/components/table/table"
  }
}

# 2、组件结构组成

  小程序中的组件文件结构看似相同,文件内容组成却有些许不同。

① 组件.json 文件

{
  "component": true, // 重点:组件声明🎉(组件的标志)

  "usingComponents": {}
}

② 组件.js 文件

Component({
  properties: {
    // 🚩 属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value'
    }
  },

  data: {
    // 这里是一些组件内部数据
    someData: {}
  },

  methods: {
    // 这里是一个自定义方法
    customMethod: function () {}
  }
})

  通过微信开发者工具自动初始化的小程序组件.js 文件,与小程序页面相比,可以发现:

小程序页面 小程序组件
数据存储: data data、properties
自定义事件: Page({})内 methods:{}内容
生命周期函数: Page({})内 lifetimes:{}内

③ 组件.wxml 文件

<!-- 页面中使用 -->
<table-vant inner-text="Some text"></table-vant>

# 3、数据、属性和方法

  简单的说,小程序的自定义组件和 vue 组件更像了。

① 数据

  properties 是对外属性:用于接收外界传递到组件的数据。

把它想象成 vue 中的 props 属性即可

  data 是私有数据:用于组件模板渲染的私有数据。

Component({
  properties: {
    // 🚩 属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value'
    }
  },

  data: {
    // 这里是一些组件内部数据
    someData: {}
  }
})
<!-- 页面中使用 -->
<table-vant inner-text="Some text"></table-vant>

② 方法

  在小程序组件方法中,可以分为:事件处理函数和自定义方法两大类

Component({
  methods: {
    // 1、事件处理函数
    addCount() {
      this.setData({
        count: this.data.count + 1
      })

      // 调用自定义方法
      this._showCount()
    }

    // 2、自定义方法(建议使用🚩_开头)
    _showCount(){
      wx.showToast({
        title: 'count值为:' + this.data.count,
        icon: 'none'
      })
    }
  }
})

# 4、纯数据字段

  纯数据字段是一些不用于界面渲染的 data 字段,可以用于提升页面更新性能。

纯数据字段要做到既不会展示在页面上,也不会传递给其他组件,仅仅在当前组件内使用。

代码示例:

Component({
  options: {
    pureDataPattern: /^_/ // 指定所有 _ 开头的数据字段为纯数据字段
  },

  data: {
    a: true, // 普通数据字段
    _b: true // 纯数据字段
  },

  methods: {
    myMethod() {
      this.data._b // 纯数据字段可以在 this.data 中获取
      this.setData({
        c: true, // 普通数据字段
        _d: true // 纯数据字段
      })
    }
  }
})
<view wx:if="{{a}}"> 这行会被展示 </view> <view wx:if="{{_b}}"> 这行不会被展示 </view>

# 二、组件样式

# 1、样式隔离

① 图解:

  上面的图例很好的描述了组件和组件、组件和页面间样式的关系。

② 重点:

  在 组件 wxss 中不应使用 ID 选择器、属性选择器和标签名选择器。因为这些选择器可以突破样式隔离防线,从而影响到外部页面/组件。

更多

  通过测试,我们发现:

  • 外部使用 id 选择器、属性选择器不会对组件内产生影响
  • 但如果外部使用了标签选择器,则会对组件产生影响

# 2、隔离等级控制 ✨

  默认情况下,小程序组件是开启样式完全隔离的,但我们可以通过styleIsolation来修改组件样式的隔离等级。

styleIsolation 可选值:

可选值 说明
isolated 完全隔离 (默认)
apply-shared 页面样式会影响组件样式
shared 解除隔离

配置如下:

① 方式 1

  • 组件.js 文件
Component({
  options: {
    styleIsolation: 'isolated'
  }
})

② 方式 2

  • 组件.json 文件
{
  "styleIsolation": "isolated",

  "component": true,
  "usingComponents": {}
}

# 3、更多

样式引入 (opens new window)

# 三、observers 监听器

数据监听器 (opens new window)

  小程序中的数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作。

他的作用类似于 vue 中的 watch 监听器。

# 1、数据监听

示例 1:

让 num 的值始终等于 numberA + numberB

Component({
  // 自定义组件 attached 生命周期函数
  attached: function () {
    this.setData({
      numberA: 1,
      numberB: 2
    })
  },

  // 数据监听
  observers: {
    'numberA, numberB': function (numberA, numberB) {
      // 在 numberA 或者 numberB 被设置时,执行这个函数
      this.setData({
        sum: numberA + numberB
      })
    }
  }
})

示例 2:

Component({
  observers: {
    // 1、普通写法
    'rgb.r, rgb,g, rgb.b': function (r, g, b) {
      // 刷新颜色值
      this.setData({
        fullColor: `${r}, ${g}, ${b}`
      })
    }

    // 2、高级✨写法
    'rgb.**': function (obj) {
      // 刷新颜色值
      this.setData({
        fullColor: `${obj.r}, ${obj.g}, ${obj.b}`
      })
    }
  }
})

# 2、字段监听

  数据监听器支持监听属性或内部数据的变化,可以同时监听多个。一次 setData 最多触发每个监听器一次

Component({
  observers: {
    title: function (newVal, oldVal) {
      console.log(newVal, oldVal)
    },
    'some.subfield': function (subfield) {
      // 使用 setData 设置 this.data.some.subfield 时触发
      // (除此以外,使用 setData 设置 this.data.some 也会触发)
      subfield === this.data.some.subfield
    },
    'arr[12]': function (arr12) {
      // 使用 setData 设置 this.data.arr[12] 时触发
      // (除此以外,使用 setData 设置 this.data.arr 也会触发)
      arr12 === this.data.arr[12]
    },
    'some.field.**': function (field) {
      // 使用 setData 设置 this.data.some.field 本身或其下任何子数据字段时触发
      // (除此以外,使用 setData 设置 this.data.some 也会触发)
      field === this.data.some.field
    }
  }
})
更新于 : 7/8/2024, 10:21:14 AM