微信小程序自定义组件开发（上）：从创建到数据通信详解（五）
一、创建和使用
1.1 创建自定义组件
在根目录下右键创建components，在components下创建文件夹存储每个组件，在每个文件夹下右键创建component组件会自动生成四个文件
1.2 引用组件
1.2.1 局部引用
1、在page.json文件中的usingComponents中引入
{"usingComponents": {"my-test":"/components/test/test"}
}page.wxml：
<my-test></my-test>1.2.2 全局引用
在根目录下的app.json下引用组件，引用方式与局部引用雷同
1.3 组件与页面的区别
相同点：
都是由.js、.json、.wxml、.wxss这四个文件组成
不同点：
1、组件的.json中需要声明“component”：true属性
2、组件的.js文件中调用的是Component()函数
3、组件处理函数需要定义在methods节点中
二、样式
2.1 样式隔离
1、组件A样式不会影响组件C
2、组件A样式不会影响小程序页面样式
3、小程序页面不会影响组件A和组件C
优点：
1、防止外界的样式影响组件内部的样式
2、防止组件的样式破坏外界的样式
2.2 注意点
1、app.wxss中只有class选择器会有样式隔离效果，id选择器，属性选择器，标签选择器不受样式隔离的影响
2.3 修改组件样式隔离选项（class选择器）
说明：自定义组件的样式隔离特性能够防止组件内外样式相互干扰的问题，但有时，我们希望外界能够控制组件内部的样式，此时，可以通过stylelsolation修改组件的样式隔离选项
操作：
message.wxml：
<!--pages/message/message.wxml-->
<text class="g-red-text">pages/message/message.wxml</text>
<view></view>
<my-test></my-test>app.wxss：
.g-red-text {color: red;
}test.wxml：
<!--components/test/test.wxml-->
<text class="g-red-text">components/test/test.wxml</text>以上效果：页面不会影响组件，组件不会影响页面
<!-- 红色 -->
pages/message/message.wxml
<!-- 不变 -->
components/test/test.wxml隔离选项
添加隔离选项一：
Component({// 在组件中 .js文件中新增如下配置options:{styleIsolation:'apply-shared'},
})结果：页面影响组件
<!-- 红色 -->
pages/message/message.wxml
<!-- 红色 -->
components/test/test.wxml添加隔离选项二：
Component({// 在组件中 .js文件中新增如下配置options:{styleIsolation:'shared'},
})
/* components/test/test.wxss */
.g-red-text{font-weight: bold;
}结果：相互影响
<!-- 红色 加粗 -->
pages/message/message.wxml
<!-- 红色 加粗 -->
components/test/test.wxml注意：
如果页面和组件中都定义了相同选择器，则以组件中的属性为主
三、data
在小程序组件中，用于组件模板渲染的私有数据，需要定义到data节点中
eg：
/*** 组件的初始数据*/data: {count: 0},四、methods
小程序组件中，事件处理函数和自定义方法需要定义到methods节点中
建议：自定义函数建议以_开头
/*** 组件的方法列表*/methods: {addCount() {// 事件方法this.setData({count: this.data.count + 1}),this._showCount()},// 自定义方法_showCount () {wx.showToast({title: 'count值：'+this.data.count,icon:'none'})}}五、properties
在小程序组件中，properties是组件的对外属性，用来接收外界传递到组件中的数据
count自增限制，代码如下
// components/test/test.js
Component({// 在组件中 .js文件中新增如下配置options: {styleIsolation: 'shared'},/*** 组件的属性列表*/properties: {// 属性定义// max:Number// 完整定义max:{type:Number, // 属性的数据类型value:10 // 属性默认值}},/*** 组件的初始数据*/data: {count: 0},/*** 组件的方法列表*/methods: {addCount() {console.info("this.data.count:"+this.data.count)console.info("this.properties.max:"+this.properties.max)if (this.data.count >= this.properties.max) return// 事件方法this.setData({count: this.data.count + 1}),this._showCount()},// 自定义方法_showCount () {wx.showToast({title: 'count值：'+this.data.count,icon:'none'})}}
})
<!--components/test/test.wxml-->
<text class="g-red-text">components/test/test.wxml</text><view>count的值：{{count}}</view>
<button bindtap="addCount">+1</button>
<text class="g-red-text">pages/home/home.wxml</text>
<view></view>
<!-- count最大自增到8 -->
<my-test max='8'></my-test>5.1 data与properties
在小程序组件中，properties属性和data数据的用法相同，他们都是可读可写的，区别：
1、data更倾向于存储组件的私有数据
2、properties更倾向于存储外界传递到组件中的数据
5.2 使用setData修改properties的值
与修改data的方法一样