day04-微信小程序-组件-组件样式隔离-父子组件通信

创建组件

• 在项目的根目录中，鼠标右键，创建 components -> 组件名 文件夹
• 在新建的 components -> 组件名 文件夹上，鼠标右键，点击新建 Component

引用组件

局部引用

组件只能在当前被引用的页面内使用

在页面的.json配置文件中

{
	"usingComponents": {
		"my-test1": "/components/test/test"
	}
}

在页面的.wxml中

<my-test1>my-test1>

全局引用

组件可以在每个小程序页面中使用

在 app.json 全局配置文件中引用组件的方式

"usingComponents": {
	"my-test2": "/components/test2/test2"
}

在页面的.wxml中

<my-test2>my-test2>

组件样式

样式隔离

• app.wxss 中的全局样式对组件无效

• 在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器！因为只有 class 选择器会有样式隔离效果， id 、属性、标签选择器不受样式隔离的影响

隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题，如果我们希望在外界能够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件的样 式隔离选项，

// 在组件的.js 文件中新增加如下配置
Component({
    options: {
        // 默认值isolated: 代表启动样式隔离
        // apply-shared: 代表父页面wxss样式将影响自定义组件
        // shared: 代表双向的影响
        styleIsolation: 'apply-shared'
    }
})

// 或在组件的.json 文件中新增加如下配置
{
	"styleIsolation": "apply-shared"
}

另外,在组件的.wxss文件中,可以引入.wxss实现使用外界的样式

@import '../../app.wxss';

组件定义

data数据

Component({
    /**
    * 组件的初始数据,用于组件模板渲染的私有数据，需要定义到 data 节点中
    */
    data: {
        n1: 0,
        n2: 5,
        sum: 0
        rgb: {
        	r:0, g:0, b:0
    	}
    },
})

改变对象数据

  methods: {    changeR() {        // 可以(推荐)        this.setData({ 'rgb.r': 100})        // 不可以,把_rgb其他属性去除掉      	// this.setData({ rgb: { r: 100 } })        // 可以      	this.setData({ rgb: { ...this.data.rgb, r: 100 } })    }  }

方法

Component({    /**    * 组件的方法列表,事件处理函数和自定义方法需要定义到 methods 节点中    */    methods: {        // 点击事件处理函数        addN () {        },        // 自定义方法： 建议和事件绑定区分开： 以 _开头        _toast () {        }    }})

properties属性

定义

Component({    // 属性定义,properties 是组件的对外属性，用来接收外界(父组件)传递到组件中的数据    properties: {        // 完整定义 属性的方式【当需要指定属性默认值时，建议使用此方式】        max: {            // 属性值的数据类型            type: Number,            // 属性值的默认值            value: 10        },        // 简化定义 属性的方式        // max: Number    }})

使用

在组件的.js中

Component({    methods: {        // 点击事件处理函数        addN () {            // 访问properties属性            // 方式1.通过properties            this.properties.max            // 方式2.通过data            this.data.max            // 使用 setData 直接修改属性的值            this.setData({                max: this.properties.max + 1            })        }    }})

在组件的.wxml中

<view>{{max}}view>

数据监听器

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

Component({    observers: {        // 监听n1 和 n2 的变化，函数的形参就是这个变化之后的值        // 方式1,分开写        n1(newN1){        },        n2(newN2){                },        // 方式2,一起写        'n1, n2'(newN1, newN2) {        },        // 监听对象属性的变化        'obj1.n1, obj1.n2'(newN1, newN2) {            // 触发此侦听器的 3 种情况：            // 【为属性A赋值】：使用setData 设置this.data.obj1.n1 时触发            // 【为属性B赋值】：使用setData 设置this.data.obj1.n2 时触发            // 【为对象赋值】：使用setData 设置this.data.obj1 时触发        },        // 不可以,用来监听对象的属性或本身的修改        /*        obj1(newObj){        },        */        // 监听对象所有属性的变化        'obj1.**'(newObj) {        }    }})

纯数据字段

为在小程序中， data 中声明的数据，会具备一个响应式的效果，系统的底层会对数据进行值变化的 监听，如果，该数据只是纯数据，没有必要进行响应式的监听，因此定义为纯数据能够提高页面的性能.

Component({    //提示:在小程序工具中,按下ctrl+鼠标左键,查看更多详情    options: {        // 指定所有_开头的数据字段为 纯数据字段        pureDataPattern: /^_/    },    data: {        a: true, // 普通数据字段        _b: true // 纯数据字段    }})

组件生命周期

自身的生命周期

在小程序组件中，生命周期函数可以直接定义在 Component 构造器的第一级参数中，也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）

// 在lifetimes字段内声明Component({	// 推荐用法    lifetimes: {        // 组件实例刚被创建好的时候         // (1)此时调用 setData 不会有效果        // (2)通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段        created() {},        // 在组件实例进入页面节点树时执行        // (1)此时， this.data 已被初始化完毕        // (2)这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）        attached() {},         // 组件渲染完成        ready() {},         // 在组建实例被从页面节点树移除时执行        // (1)退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数        // (2)此时适合做一些清理性质的工作,例如,清除定时器        detached() {},     }})

// 在Component 构造器的第一级参数Component({    created() {}, // 组件实例刚被创建好的时候     attached() {}, // 在组件实例进入页面节点树时执行        ready() {}, // 组件渲染完成    detached() {}, // 在组建实例被从页面节点树移除时执行})

所在页面的生命周期

Component({    // 组件在页面的生命周期函数在该节点定义    pageLifetimes: {        show () {}, // 页面被展示        hide () {}, // 页面被隐藏        resize () {} // 页面尺寸变化    }})

插槽

单个插槽

• 子组件

<view class="wrapper">    <view>这里是组件的内部节点view>        <slot>slot>view>

• 父组件

<component-child>        <view>这里是插入到组件slot中的内容view>component-child>

多个插槽

• 开启多个插槽的配置

  在子组件的js

Component({    options: {    	multipleSolts: true // 在组件定义时的选项中启用多 slot支持    }})

• 父组件

<view class="wrapper">        <slot name="before">slot>    <view>这是一段固定的文本内容view>        <slot name="after">slot>view>

• 组件使用者的代码

<component-child>        <view slot="before">这是通过插槽填充的内容,name为beforeview>    <view slot="after">这是通过插槽填充的内容,name为afterview>component-child>

父子组件通信

属性绑定(父->子)

• 父组件

// 父组件中的data节点data: {	count: 0}

<component-child count="{{count}}">component-child>

• 子组件

// 子组件的properties 节点properties: {	count: Number}

<text>子组件中， count值为：{{count}}text>

// 子组件的js//通过properties访问this.properties.count//通过data访问this.data.count

事件绑定(子->父)

• 子组件

<button bindtap="addCount">+1button>

// 子组件中的js代码methods: {    addCount() {        // 使用 this.triggerEvent去触发父组件的自定义事件        // 并将数值同步给父组件        this.tiggerEvent('update-count', {count: this.properties.count})    }}

• 父组件

<component-child count="{{count}}" bind:update-count="updateCount">component-child>

// 父组件的js文件updateCount (e) {    this.setData({        // 父组件通过事件对象 e 获取到子组件传递的值        count: e.detail.count    })}

获取组件实例(父->子)

• 父组件

<component-child class="child">component-child><button bindtap="getChild">获取子组件实例button>

// 父组件的js文件// 父组件的js文件 按钮的tap事件处理函数getChild() {    // 切记下面的参数不能传递标签选择器，不然返回的是null    // 也可以传递ID选择器    const child = this.selectComponent('.child')	// 调用子组件的setData方法，修改count的值，	child.setData({ count: this.data.count + 1 })    // 直接调用子组件的addCount方法，该方法在child实例对象的__proto__上可以访问到该方法    child.addCount() }

behaviors

用于实现组件间代码共享的特性，类似于 Vue.js 中的 mixins。

• behavior.js文件

// 调用 Behavior()方法， 创建实例对象// 并使用 module.exports 将 behavior 实例对象共享出去module.exports = Behavior({    // 属性节点    properties: {},    // 私有数据节点    data: {    username: 'zs'    },    // 事件处理函数和自定义方法节点    methods: {},    // 其他节点...})

• 组件中导入behaviors

// 组件中的js代码// 1.使用 required() 导入需要的自定义 behavior 模块const myBehavior = required("../../behaviors/my-behavior")// 2.将导入的behavior 实例对象， 挂载在 behaviors 数组节点中， 即可生效Component({    // 在组件内部 与data节点平级的位置定义该属性，挂载behavior模块    behaviors: [myBehavior]})

<view>在组件中共享的behavior是： {{username}}view>

编辑器和文档操作

1. 查看组件的data数据