组件的创建，引用，样式隔离以及methods,data,properties和数据事件监听

1. 组件的创建

组件的创建，在项目的根目录下创建components文件夹（只是为了见名知意），然后点击右键新建component即可。

点击新建component之后，会自动为你创建四个文件，.js,.json,.wxml,.wxss

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

2. 组件的引用

组件的引用方式分为“局部引用”和“全局引用”，
局部引用：组件只能在当前被引用的页面内使用。
全局引用：组件可以在每个小程序页面中使用。

2.1. 局部引用

局部引用组件，只需要在需要使用该组件的页面的.json文件中进行配置即可。局部引用组件，只能在当前页面进行引用。

格式如下，我们只需要在usingComponents中设定组件，以键值对的方式设定即可。
"usingComponents": {组件名:组件位置,}

例如：

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

使用方式：

<my-component></my-component>

2.2. 全局引用

全局引用同理，则需要在当前应用的的.json文件中进行配置。
全局引用配置，则可以在当前应用的所有页面进行使用

{
   
  "pages": [
    "pages/home/home",
    "pages/message/message",
    "pages/contact/contact"
  ],
  "window": {
   
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#13A7A0",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  // 全局引用组件
  "usingComponents": {
   
      "my-component2":"/components/test/test"
  },
}

使用方式：

<my-component2></my-component2>

2.3. 组件和页面的区别

从文件组成结构来看，组件和页面的构成都是由.js,.json,.wxml,.wxss文件组成，但是其中.js与.json文件有明显不同。

.json文件，组件的.json文件中需要声明 “component”: true 属性

.js 文件，组件的.js文件中调用的是component函数，页面的.js文件中调用的是page函数。

组件的方法下需要定义到methods中，而页面的话方法是可以随意定义的只要在Page函数中就行。

3. 组件的样式隔离

3.1. 默认情况，组件样式隔离性

默认情况下，组件的样式具有隔离性，即自定义组件的样式只会对当前组件生效，不会影响到组件之外的其他元素。同时组件的样式也不会影响到外界其他元素的样式。

tips:只有class选择器会有样式的隔离效果，id选择器，属性选择器，标签选择器不受样式隔离的影响。

3.2. 修改组件的样式隔离选项

虽然默认情况下，自定义组件的样式隔离性能够防止组件内外样式互相干扰的问题。可以通过配置 option 中的 styleIsolation 的值来修改组件的样式隔离选项。

其中styleIsolation 可以配置的值有 isolated,apply-shared和shared

styleIsolation 选项从基础库版本 2.6.5 开始支持：
● isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
● apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
● shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）

Component({
   
    properties: {
   },

    data: {
   },

    methods: {
   },

    options:{
   styleIsolation :'isolated'}
})

4. 组件的data,methods和properties

4.1. 组件中的data

在小程序组件中，用于组件模板渲染的私有数据，需要定义到 data 节点中（与页面的data作用是一样的）。

// components/test/test.js
Component({
   

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

4.2. 组件的methods

在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中.
一般情况下为了区分事件处理函数和自定义方法，我们在自定义方法前加一个下划线以示区分。

// components/test/test.js
Component({
   
    methods: {
   
        // bindTap 绑定的事件处理函数
        addCount(){
   
            this.setData({
   
                count:this.data.count+1
            })
            this._showCount()
        },
          // 自定义的方法
         _showCount(){
   
            console.log(this.data.count)
        }
    },
}

4.3. 组件的properties

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

// components/test/test.js
Component({
   
    /**
     * 组件的属性列表
     */
    properties: {
   
        // 简写定义，可以忽略默认值，只给数据类型
        max:Number,
        // 完整定义
        age:{
   
            type:Number,
            value:20
        }
    },
}

当我们在组件的properties中声明了属性，那么我们在组件中就可以使用这些属性。

<my-component max="20" age="10"></my-component>

4.4. data 与 properties 的异同

在组件中，data与properties都是用来存放数据的，用法也都一样。

只不过data 更倾向于存储组件的私有数据,properties 更倾向于存储外界传递到组件中的数据

由于 data 数据和 properties 属性在本质上没有任何区别，因此 properties 属性的值也可以用于页面渲染，或使用 setData 为 properties 中的属性重新赋值。

组件的js部分

// components/test/test.js
Component({
   
  /**
     * 组件的属性列表
     */
  properties: {
   
    // 简写定义，可以忽略默认值，只给数据类型
    max:Number,
    // 完整定义
    age:{
   
      type:Number,
      value:20
    }
  },

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

  /**
     * 组件的方法列表
     */
  methods: {
   
    addCount(){
   
      this.setData({
   
        count:this.data.count+1,
        max:this.properties.max+1
      })
      this._showCount()
    },
    _showCount(){
   
      console.log(this.data.count)
    }
  },
  options:{
   
    styleIsolation :'apply-shared'
  }
})

组件的wxml部分

<!--components/test/test.wxml-->
<text class="t-color t-bold">components/test/test.wxml</text>
<view>{
  {max}}</view>
<button bindtap="addCount">+1</button>

页面的效果：

5. 组件的数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作（一般都是监听setData的数据，即当有data中的字段或者对象被setData时就会触发数据监听）

在组件中，需要在组件的.js文件中配置observers配置项即可，格式如下：

5.1. 字段上的数据监听格式

// components/test/test.js
Component({
   
      // 组件的data数据监听，只要字段A或者字段B发生了变化，都会触发数据监听器
    observers:{
   
        '字段A,字段B':function(字段A的新值,字段B的新值){
   
            // 函数体 ---- 字段A或字段B被setData赋新值时会触发
        }
    }
})

这里的字段A，字段B可以是任意多个的字段，如果太多则可以使用**通配符来匹配。

5.2. 对象属性上的数据监听格式

对象的属性上的数据监听，只需要以对象.属性的方式即可。

// components/test/test.js
Component({
   
      // 组件的data数据监听，只要字段A或者字段B发生了变化，都会触发数据监听器
    observers:{
   
        '对象.属性A,对象.属性B':function(对象.属性A的新值,对象.属性B的新值){
   
            // 函数体 ---- 对象的属性A或属性B,被setData赋新值时会触发
        }
    }
})

5.3. **通配符的数据监听格式

**通配符，可以用作匹配任意字段，也可以用作匹配对象的任意属性

1. 匹配任意字段

// components/test/test.js
Component({
   
      // 组件的data数据监听，只要字段A或者字段B发生了变化，都会触发数据监听器
    observers:{
   
        '**':function(){
   
            // 函数体 ---- 数据的任意setData都会触发
        }
    }
})

1. 匹配对象的任意属性

// components/test/test.js
Component({
   
      // 组件的data数据监听，只要字段A或者字段B发生了变化，都会触发数据监听器
    observers:{
   
        'obj.**':function(newObj){
   
            // 函数体 ---- 对象的任意属性的setData都会触发
        }
    }
})

5.4. 数字求和的数据监听小demo

组件的结构（.wxml）

<view>{
  {num1}} + {
  {num2}} = {
  {sum}}</view>
<button bindtap="addNum1">num1+1</button>
<button bindtap="addNum2">num2+1</button>

组件的.js部分

// components/test2/test2.js
Component({
   
    /**
     * 组件的属性列表
     */
    properties: {
   

    },

    /**
     * 组件的初始数据
     */
    data: {
   
        num1:0,
        num2:0,
        sum:0
    },

    /**
     * 组件的方法列表
     */
    methods: {
   
        addNum1(){
   
            this.setData({
   
                num1:this.data.num1+1
            })
        },
        addNum2(){
   
            this.setData({
   
                num2:this.data.num2+1
            })
        }
    },

    // 数据监听器
    observers:{
   
        'num1,num2':function(newNum1,newNum2){
   
            this.setData({
   
                sum:newNum1+newNum2
            })
        }
    }
})

组件的全局引用，为了方便就直接全局引用了(app.json)

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

页面的使用

<my-test2></my-test2>

5.5. 颜色RGB按钮的数据监听小demo

组件wxml部分：

<view style="background-color: rgb({
      {
      fullColor}});" class="colorBox">
  颜色值:{
  {fullColor}}    
</view>

<button size="mini" bindtap="changeR" type="default">R</button>
<button size="mini" bindtap="changeG" type="primary">G</button>
<button size="mini" bindtap="changeB" type="warn">B</button>

组件wxss部分：

.colorBox{
   
  line-height: 200rpx;
  font-size: 24rpx;
  color:white;
  text-shadow: 0rpx 0rpx 2rpx black;
  text-align: center;
}

组件js部分：

// components/test3/test3.js
Component({
   
    /**
     * 组件的属性列表
     */
    properties: {
   

    },

    /**
     * 组件的初始数据
     */
    data: {
   
        rgb: {
   
            r: 0,
            g: 0,
            b: 0
        },
        fullColor: '0,0,0'
    },

    /**
     * 组件的方法列表
     */
    methods: {
   
        changeR: function () {
   
            this.setData({
   
                'rgb.r': this.data.rgb.r + 5 > 255 ? 255 : this.data.rgb.r + 5
            })
        },
        changeG: function () {
   
            this.setData({
   
                'rgb.g': this.data.rgb.g + 5 > 255 ? 255 : this.data.rgb.g + 5
            })
        },
        changeB: function () {
   
            this.setData({
   
                'rgb.b': this.data.rgb.b + 5 > 255 ? 255 : this.data.rgb.b + 5
            })
        }
    },

    observers:{
   
        // 监听 rgb对象的所有属性的setData
        'rgb.**':function(obj){
   
            this.setData({
   
                fullColor:`${
     obj.r},${
     obj.g},${
     obj.b}`
            })
        }
    }
})

全局配置引用组件：

{
   
  "usingComponents": {
   
      "my-test3":"/components/test3/test3"
  },
}

页面使用组件及效果：

<my-test3></my-test3>