class09：自定义组件的数据与属性

一、自定义组件

链接: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

1.介绍

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

2.创建

新建components文件夹存放所有自定义组件，每个组件新建单独的目录存放该文件。点击新建components输入文件名即可。

3.局部引用

(单个页面引用，单个页面使用)
在pages文件的相应页面的.json文件中引入自定义组件；

// pages/home.json
{
  "usingComponents": {
    "my_test01": "/components/test01/test01"
    // 属性名(自定义) ：组件地址
  }
}

在wxml文件中通过使用组件标签导入组件；

<!--pages/home/home.wxml-->
<!-- my_test01是自定义组件的使用名称 -->
<my_test01></my_test01>

<!--components/test01/test01.wxml-->
<text>我是test01组件</text>

4.全局引用

即每一个页面都可以引用；
在app.json文件中引入组件：

"usingComponents": {
    "my_test02": "/components/test02/test02"
},

在任意页面使用：

<!--pages/home/home.wxml-->
<!-- my_test01是自定义组件的使用名称 -->
<my_test01></my_test01>
<my_test02></my_test02>

<!--components/test02/test02.wxml-->
<text>我是test02组件</text>

5.隔离性

组件的样式具有隔离性。即组件和页面的样式不会互相干扰。
前提：但是只有class(类)选择器才具有隔离效果，且全局样式不会作用到组件上。

6.组件样式隔离

组件模板和样式链接: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。除非以下两种情况：
app.wxss 或页面的 wxss 中使用了标签名选择器（或一些其他特殊选择器）来直接指定样式，这些选择器会影响到页面和全部组件。通常情况下这是不推荐的做法。

指定特殊的样式隔离选项 styleIsolation 。

Component({
  options: {
    styleIsolation: 'isolated'
  }
})

styleIsolation 选项支持以下取值：

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

案例：

<!--pages/home/home.wxml-->
<text class="home">我是Home页面</text>
<my_test01></my_test01>

/* pages/home/home.wxss */
.home{
    color: red;
    font-size: 110rpx;
    background-color: blueviolet;
}

<!--components/test01/test01.wxml-->
<text class="test01">我是test01组件</text>

/* components/test01/test01.wxss */
.test01{
    color: greenyellow;
}

改变styleIsolation的取值，观察页面变化：

// components/test01/test01.js
Component({
    options:{
        styleIsolation: "isolated"  // 启用样式隔离
        // styleIsolation: "apply-shared"  // 页面影响组件，组件不影响页面
        // styleIsolation: "shared"  // 不隔离，相互影响
    },
})

三种取值效果分别如下：

二、自定义组件的数据与属性

1.组件的事件函数和普通函数

注意js中methods里的this引用：

<!--components/test01/test01.wxml-->
<view class="text">{{num}}</view>
<button bindtap="addNum" type="primary" >点击</button>

/* components/test01/test01.wxss */
.text{
    font-size: 100rpx;
}

// components/test01/test01.js
Component({
    /**
     * 组件的初始数据
     */
    data: {
        num: 0
    },

    /**
     * 组件的方法列表
     */
    methods: {
        // 事件函数
        addNum(){
            this.setData({
                num: this.data.num + 1
            });
            this._printNum(); //调用methods的方法
        },
        // 普通业务函数，约定以_开头
        _printNum(){
            console.log("湖人总冠军！")
        }            
    }
})

2.页面给组件传入数据

<!--pages/home/home.wxml-->
// 页面给组件传入数据
<my_test01 laker="勒布朗詹姆斯"></my_test01>

<!--components/test01/test01.wxml-->
<view class="text">{{num}}</view>
<button bindtap="addNum" type="primary" >点击</button>

// components/test01/test01.js
Component({
    /**
     * 组件的属性列表：接收外部传入的数据
     */
    properties: {
        laker: String  //接收传入的数据，并且指定类型为string --- 必填！
        laker:{
            type: String, // 只对传入的参数校验类型，不会对默认值进行校验
            value: 17   //设置默认值，当没有参数传入时，默认值生效        
        }
    },
    
    /**
     * 组件的方法列表
     */
    methods: {
        // 事件函数
        addNum(){
            console.log(this.properties)
        },              
    }
})

示例plus：

<!--pages/home/home.wxml-->
<my_test02 userData="{{arrData}}"></my_test02>

// pages/home/home.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        arrData:[
            {name:"詹姆斯", age:37},
            {name:"乔丹", age:61},
            {name:"科比", age:41},
        ]
    },
})

<!--components/test02/test02.wxml-->
<text class="test02">我是test02组件</text>

<view wx:for="{{userData}}" wx:key="index">
    {{item.name}}------{{item.age}}
</view>
// components/test02/test02.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        userData:Array //得到页面传过来的数组
    },
})

注：添加data

// components/test02/test02.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        userData:Array //得到页面传过来的数组
    },

    /**
     * 组件的初始数据
     */
    data: {
        userName:"罗栎洵"
    },

    /**
     * 组件的方法列表
     */
    methods: {
        printText(){
            console.log(this.properties);
            console.log(this.data);
            console.log(this.properties === this.data)
        }
    }
})

<!--components/test02/test02.wxml-->
<button bindtap="printText" type="primary">点击</button>

<!--pages/home/home.wxml-->
<my_test02></my_test02>

结论：
data和properties指向同一个对象，两者完全相同；
一般认为，data存放组件私有数据，properties存放外界传递来的数据；

三、复习

1.小程序的网络请求
2.配置导航栏
3.页面的导航

• 声明式导航 ： 通过指定组件的open-type来跳转页面；
• 编程式导航 ： 通过在js中调用对应类型API 来跳转页面；
• 后退导航。

4.页面常用的事件：

• 下拉刷新
• 上拉触底

5.小程序（应用）的生命周期
6.页面的生命周期
7.WXS ： 不支持es6+语法 过滤器
8.自定义组件：

• 创建
• 使用
• 注意样式的隔离性
• 数据：私有数据 data；外部数据：properties