小程序 | 自定义组件 + 组件的创建和使用 + 自定义组件数据，方法和属性 + 数据监听器 + 纯数据字段 + 组件的生命周期 + 组件所在页面的生命周期+插槽+父子组件间通信+behaviors

组件的创建与引用

创建组件

1. 在项目的根目录中，鼠标右键，创建 components -> test 文件夹
2. 在新建的 components -> test 文件夹上，鼠标右键，点击“新建 Component”
3. 键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js，.json， .wxml 和 .wxss

注意：为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中，例如：

引用组件

组件的引用方式分为“局部引用”和“全局引用”，顾名思义：

1. 局部引用：组件只能在当前被引用的页面内使用
2. 全局引用：组件可以在每个小程序页面中使用

局部引用组件

在页面的 .json 配置文件中引用组件的方式，叫做“局部引用”。

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

全局引用组件

在 app.json 全局配置文件中引用组件的方式，叫做“全局引用”。

全局引用 VS 局部引用

根据组件的使用频率和范围，来选择合适的引用方式：

• 如果某组件在多个页面中经常被用到，建议进行“全局引用”
• 如果某组件只在特定的页面中被用到，建议进行“局部引用”

组件和页面的区别

从表面来看，组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。

但是，组件和页面的 .js 与 .json 文件有明显的不同：

• 组件的 .json 文件中需要声明 "component": true 属性，页面不需要声明
• 组件的 .js 文件中调用的是 Component() 函数，而页面是调用Page()函数
• 组件的事件处理函数需要定义到 methods 节点中，页面的只需要定义到和data节点平齐的节点就行

自定义组件的样式

组件样式隔离

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

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

好处：

1. 防止外界的样式影响组件内部的样式
2. 防止组件的样式破坏外界的样式

组件样式隔离的注意点

1. app.wxss 中的全局样式对组件无效
2. 只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响

建议：在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器！

修改组件的样式隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。

但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件的样式隔离选项

// 在组件的 .js 文件中新增如下配置
Component({
   
	options:{
   
		styleIsolation:"isolated" // 启用样式隔离
	}
})

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

可选值	默认值	描述
isolated	是	表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响
apply-shared	否	表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面（页面影响组件）
shared	否	表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件（双向影响）

自定义组件中的数据、方法和属性

data 数据

在小程序组件中，用于组件模板渲染的私有数据，需要定义到 data 节点中

Component({
   
  /**
   * 组件的初始数据
   */
  data: {
   
    count:0
  },
})

methods 方法

在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中

Component({
   
  methods: {
   
    // 点击事件处理函数
    addCount() {
   
      this.setData({
   
        count: this.data.count + 1
      })
      // 调用方法
      this._showCount();
    },
    
    // 自定义方法
    _showCount() {
   
      wx.showToast({
   
        title: 'count是' + this.data.count,
        icon: 'none'
      })
    },
  }
})

properties 属性

在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据

在methods 中使用的话是 this.properties.max

data 和 properties 的区别

在小程序的组件中，properties 属性和 data 数据的用法相同，它们都是可读可写的，只不过：

1. data 更倾向于存储组件的私有数据
2. properties 更倾向于存储外界传递到组件中的数据
   

使用 setData 修改 properties 的值

由于 data 数据和 properties 属性在本质上没有任何区别

因此 properties 属性的值也可以用于页面渲染，或使用 setData 为 properties 中的属性重新赋值

数据监听器

数据监听器的基本用法

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

它的作用类似于 vue 中的 watch 侦听器

// components/test2/test2.js
Component({
   
  // 组件的初始数据
  data: