（十四）小程序自定义组件*

虹桥
78 阅读6分钟

自定义组价

创建自定义组件

  • 项目根目录中创建components文件夹
  • 在components文件夹下创建组件(一个组件单独创建一个文件保存)
  • 新建test组件：在test文件上右键，选择新建Component
  • 输入组件名回车自动生成4件套

引用组件

  • 局部引用：组件只能在当前被引用的页面内使用
//页面json文件中
{
    "usingComponents": {
        "my-test": "/components/test/test"
    }
}

//页面中使用
<my-test></my-test>
  • 全局引用：组件在每个小程序页面中都可使用

全局引用在app.json文件中，引入方式同上

组件和页面的区别

  • 组件.json文件需要声明”component“:true属性
  • 组件.js文件调用的是Component()函数
  • 组件的事件处理函数需要写在methods节点中

组件样式

默认情况自定义组件样式只对当前组件生效，不会影响组件之外的UI结构

  • 组件A不会影响组件C的样式
  • 组件A不会影响小程序页面的样式
  • 小程序页面样式不会影响组件A和C的样式

image.png 注意

  • app.wxss中全局样式对组件无效
  • 只有class选择器有样式隔离效果

自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题，此时可以通过 styleIsolation修改组件的样式隔离选项

//方式一：组件js文件
Component(){
    options: {
        styleIsolation: 'isolated'
    }
}
//方式二：组件json文件
{
    "styleIsolation": 'isolated'
}

styleIsolation可选值： image.png

组件的数据、方法和属性

data数据

用于组件模板渲染的私有数据，需要定义再data节点中

Component(){
    data: {
        count； 0
    }
}

method方法

事件处理函数和自定义方法需要定义在method节点中

Component(){
    data: {
        count； 0
    },
    methods: {
        addCount() {
            //调用自定义方法
            this._showInfo()
        },
        //自定义方法建议_开头
        _showInfo() {...}
    }
}

properties属性

properties是组件的对外属性，用来接收外界传入组件的数据

Component() {
    //属性定义
    properties: {
        //接收值
        max: {
            type: Number, //值类型
            value: 10 //默认值
        }
        //简写方式
        max: Number
    }
}

//传值
<my-test max="10"><my-test>

data和properties区别

properties属性和data数据用法相同，都是可读可写

  • data 更倾向于存储组件的私有数据
  • properties 更倾向于存储外界传递到组价的数据
Component(){
    method: {
        showInfo() {
            console.log(this.data) // {count: 0, max: 10}
            console.log(this.properties) // {count: 0, max: 10}
            console.log(this.data === this.properties) // true
        }
    }
}

由于data数据和properties本质上没区别，所以properties也可以用于页面渲染，使用setData可以为properties属性重新赋值

数据监听器

数据监听器用于监听和响应任何属性和字段的变化，从而执行特定的操作 （vue中watch）

Component() {
    observers: {
        //监听数据变化
        "字段a,字段b": function(字段a新值，字段b新值) {...}
        //监听对象属性变化
        "对象.属性A,对象.属性B": function(属性A新值，属性B新值) {...}
    }
}

基本用法： image.png

组件生命周期

组件生命周期函数： image.png

主要周期函数

其中最主要的是 created、attached、detached

  • 组件实例刚被创建好时，created函数触发，此时不能调用setData,只应该给组件的this添加一些自定义属性字段
  • 组件初始化完毕，进入页面后，attached函数触发，此时this.data初始化完毕，可以发起数据请求
  • 组件离开页面节点后，detached函数触发，此时适合做清理工作

lifetimes节点

以前生命周期函数直接定义在Component构造器中，现在可以再lifetimes字段中声明（推荐）

Component({
    lifetimes: {
        attached(){}, //组件实例进入节点执行
        detached(){}, //组件实例被页面节点树移除后执行
    }
})

组件所在页面生命周期函数

有时自定义组件的行为依赖于页面状态的变化（每次进入页面触发show函数，页面组件展示不同效果）

组件所在页面的生命周期函数如下： image.png

pageLifetimes节点

组件所在页面的生命周期函数需要定义再 pageLifetimes 节点中

Component() {
    pageLifetimes: {
        show() {}, //页面展示
        hide() {}, //页面隐藏
        resize() {} //页面尺寸变化
    }
}

插槽

在自定义组件的wxml结构中，可以提供一个 <slot> 节点(插槽)，用于承载组件使用者提供的wxml结构。

image.png

单个插槽

在小程序中，默认每个自定义组件中只允许使用一个<slot>进行占位，这种个数个书上的限制叫做单个插槽

image.png

多个插槽

  • 启用多个插槽：在小程序的自定义组件中，需要使用多<slot>插槽时，可以在组件的.js文件中，通过如下方式进行启用 image.png
  • 使用多个插槽：可以在组件的.wxml中使用多个<slot>标签,以不同的name来区分不同的插槽。示例代码如下: image.png

组件间通信

父子组件之间通信的三种方式

  • 属性绑定
    • 用于父组件向子组件的指定属性设置数据 （父传子）
  • 事件绑定
    • 用于子组件向父组件传值 （子传父）
  • 获取组件实例
    • 父组件通过this.selectComponent()获取子组件实例对象
    • 直接访问子组件的任意数据和方法

属性绑定(props)

属性绑定用于实现父向子传值，而且只能传递普通类型的数据，无法将方法传递给子组件。父组件的示例代码如下: image.png 子组件在properties节点中声明对应的属性并使用： image.png

事件绑定($emit)

事件绑定用于实现子向父传值，可以传递任意类型数据，使用步骤如下： image.png

  • 父组件中定义函数
//父组件中定义函数
syncCount(){
    console.log('父组件中函数')
}
  • 父组件绑定函数
<!--子组件-->
<!--使用bind:自定义事件名称（推荐）-->
<my-test count="{{count}}" bind:sync="syncCount"></my-test>
<my-test count="{{count}}" bindSync="syncCount"></my-test>
  • 子组件中调用this.triggerEvent('自定义事件名', {参数对象})，将数据发送到父组件： image.png
  • 父组件通过e.detail获取子组件传递的数据
//父组件中定义函数
syncCount(e){
    //console.log('父组件中函数')
    console.log(e.detail.value) //拿到子组件传递的值
}

获取组件实例

可在父组件里调用this .selectComponent("id或class选择器")，获取子组件的实例对象,从而直接访问子组件的任意数据和方法。调用时需要传入一个选择器,例如this.selectComponent(".my-component")。 image.png

behaviors

什么事behaviors

behaviors是小程序中用于实现组件间代码共享的特性（累死vue中mixins） image.png 每个behavior可以包含一组属性、 数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中。每个组件可以引用多个behavior, behavior 也可以引用其它behavior。

创建behavior

调用Behavior(Object object)方法即可创建-个共享的behavior实例对象，供所有的组件使用: image.png

导入并使用behavior

在组件中，使用require()方法导入需要的behavior,挂载后即可访问behavior中的数据或方法，示例代码如下: image.png

behavior中所有可用节点

image.png

同名字段覆盖和组合规则

组件和它所引用的behavior中可以包含同名的字段，有三种处理规则：

avatar
文章
阅读
粉丝