【小程序-自定义组件】创建引用组件，组件样式隔离，数据监听器，纯数据字段，组件父子通信，behavior

自定义组件

1.1 组件的创建与引用

1. 创建组件
   • 在项目的根目录中，鼠标右键，创建components -> test文件夹
   • 在新建的components -> test文件夹上，鼠标右键，点击“新建Component"
   • 键入组件的名称之后回车，会自动生成组件对应的4个文件，后缀名分别为.js，.json，.wxml和.wxss
2. 引用组件
   • 组件的引用方式分为“局部引用”和“全局引用”，顾名思义:
     • 局部引用:组件只能在当前被引用的页面内使用
     • 全局引用:组件可以在每个小程序页面中使用

---

3. 局部引用组件
   • 在页面的 .json 配置文件中引用组件的方式，叫做“局部引用”。示例代码如下:

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

<!-- 在 wxml文件中使用 -->
<my-test1></my-test1>

---

4. 全局引用组件
   • 在app.json 全局配置文件中引用组件的方式，叫做“全局引用”。示例代码如下:

{
   
	"pages":{
   /* 省略不必要的代码 */},
	"window":{
   /* 省略不必要的代码 */},
	"usingComponents":{
   
		"my-test2":"/components/test2/test2"
	}
}

<!-- 在 wxml文件中使用 -->
<my-test2></my-test2>

1.2 组件样式

• 默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的UI结构，如图所示:
  • 组件A的样式不会影响组件C的样式
  • 组件A的样式不会影响小程序页面的样式
  • 小程序页面的样式不会影响组件A和C的样式
• 好处:
  • 防止外界的样式影响组件内部的样式
  • 防止组件的样式破坏外界的样式
    

---

• 组件样式隔离的注意点：
  • app.wxss 中的全局样式对组件无效
  • 只有class选择器会有样式隔离效果，id选择器、属性选择器、标签选择器不受样式隔离的影响
• 建议：在组件和引用组件的页面中建议使用class选择器，不要使用id、属性、标签选择器!

---

1.2.1 修改组件的样式隔离选项

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

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

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

• styleIsolation 的可选值

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

1.3 组件数据、方法和属性

1. data数据
   • 在小程序组件中，用于组件模板渲染的私有数据，需要定义到data 节点中，示例如下:

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

2. methods方法
   • 在小程序组件中，事件处理函数和自定义方法需要定义到methods 节点中，示例代码如下:

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

3. properties属性
   • 在小程序组件中，properties是组件的对外属性，用来接收外界传递到组件中的数据，示例代码如下:

Component({
   
   /**
   * 组件的属性列表
   */
  properties: {
   
    // 第一种方式：简化的方式
    max: Number，
    // 第二种方式：完整的定义方式
    max: {
   
      type: Number,// 属性值的数据类型
      value: 10//属性默认值
    }
  }
})

<my-test1 max="8"></my-test1>

---

4. data和properties
   • 在小程序的组件中，properties属性和data 数据的用法相同，它们都是可读可写的，只不过:
     • data更倾向于存储组件的私有数据<