注意：全局/局部组件 -- 引入的文件路径不要加后缀！！！（因为打包的时候，文件夹的.js，.json，.wxml ， .wxss 文件 会打包成一个文件）
- 局部组件 的定义?
// 注意事项： 全局/局部组件 -- 引入的文件 不要加后缀。！！！（因为打包的时候，文件夹的.js，.json，.wxml ， .wxss 文件 会打包成一个文件）
// 组件的 .json 文件
{
"component": true,
}
//引用组件的页面的 .json 文件
{
"usingComponents": {
"test": "/components/test/test" // (格式：) 组件名:组件路径
}
}
- 全局组件 的定义：(在根目录app.json文件中定义，为全局组件)
"usingComponents": {
"global_test1":"/components/test1/test1"
},- 局部 + 全局组件的引用：
<!-- 引用组件 -->
<!-- 局部组件 ：需在引入组件的页面的.json 文件中配置”usingComponents“属性，在引入对应组件名 -->
<test />
<!-- 全局组件： 需在app.json 文件中配置”usingComponents“属性，即可全局生效(直接引用即可) -->
<global_test1 />组件与页面的区别：
- 需要在.json文件中，声明 "component": true,
- 在.js 文件中，调用的是component() 函数
- 事件处理函数需要定义在 methods 节点中
- 特点(优点)：自定义组件样式只对当前组件生效，不会影响其他页面/其他组件样式，也不会被其他页面/组件样式影响
- 默认app.wxss中，全局样式中的class名对组件无效（组件用app.wxss中的class名不会生成对应样式）。但是id、标签、属性选择器则会生效。可修改为单向/双向影响，如下：
// 方法一： 在组件的.js 文件中的componeng中添加styleIsolation配置
Component({
options: {
styleIsolation: 'shared'// 外部(页面)、组件 css互相影响
// styleIsolation:'apply-shared'//外部(页面)css，影响 组件
// styleIsolation:'isolated'// 外部(页面)、组件 css互不影响
},
})
// 方法二：在组件的.json文件中添加styleIsolation配置（值同上）
{
"styleIsolation": "shared"
}?6.properties属性(相当与vue的props）接收传入数据的两种写法：(简化写法 + 完整写法)，。且properties和data属性都是可读可写的，所以也可以用 setData 修改?properties中的值。如下：
// data：倾向于存储私有数据
// properties：倾向于存储外界传入数据
// 但properties和data属性本质都是一样的，都是可读可写的(打印 this.data===this.properties 输出 true)
// （调用组件的页面）传入 max 值:
<test max='10'/>
// 组件中显示 properties 与 data 值的写法
<view> data 中 count ： {{count}} </view>
<view> properties 中 min ： {{min}} </view>
<button bindtap="addCount" size="mini" type="primary"> addCount </button>
// 组件中设置传入值：
Component({
/**
* 组件的属性列表 -- 设置传入值（相当与vue 组件的 props）
*/
properties: {
max: Number, // 简化写法，无指定默认值
min: { // 完整接收传入组件数据写法，可指定默认值
type: Number, // 传入类型
value: 12, //默认值
}
},
/**
* 组件的初始数据
*/
data: {
count: 0,
},
/**
* 组件的方法列表
*/
methods: {
addCount() {
// properties和data属性本质都是一样的，都是可读可写的。 data：倾向于存储私有数据，properties：倾向于存储外界传入数据
console.log(this.data === this.properties)
// 获取properties中的值 : 使用 this.properties.max
if (this.data.count >= this.properties.max) {
this._wxAlert('已到达上限')
return
}
// 设置 properties + data 中的值 ：可以用 setData
this.setData({
count: this.data.count + 1,// 设置 data 中的值
min:this.properties.min+1 // 设置 properties中的值
})
this._wxAlert();// 调用组件methods中的其他方法
},
_wxAlert(){
//微信小程序提供的方法
wx.showToast({
title: `${val||'弹窗提示'}`,
})
}
}
})
