微信小程序-4

自定义组件

创建组件

在项���的根目录中，创建 components 文件夹，在里面编写我们的自定义主键，如下所示：

引用组件

局部引用：

• index.json

  // 在页面的 .json 文件中，引入组件{"usingComponents": {"my-text2": "/components/test2/test2"}}

  • index.wxml

    // 使用组件

    全局引用：

    • app.json

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

      • index.wxml

        // 使用组件

        组件和页面的区别

        相同点：

        • 组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的

          不同点：

          • 组件的 .json 文件中需要声明 "component": true

          • 组件的 .js 文件中调用的是 Component() 函数

          • 组件的事件处理函数需要定义到 methods 节点中

            组件的样式

            样式隔离：默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的内容

            注意：

            • app.wxss 中的样式对自定义组件无效
            • 只有 class 选择器会有样式隔离效果，id 选择器，属性选择器，标签选择器不受样式隔离的影响

              建议：在组件和引用组件的页面中，使用 class 选择器，不要使用 id、属性、标签选择器！

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

              有时候，我们希望外界能够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件样式隔离的选项

              • 自定义组件.js

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

                数据|方法|属性

                • 自定义组件.wxml

                  {{ count }}+1

                  • 自定义组件.js

                    Component({  // 组件的属性列表  properties: {    max:{             // 完整定义属性的方式      type: Number,   // 属性值的数据类型      value: 10       // 属性默认值    },    // max: Number       // 简化定义属性的方式【不需要指定属性默认值的时候，可以使用简化的方式】  },  // 组件的初始数据  data: {    count: 0  },  // 组件的方法列表  methods: {    addCount() {      if(this.data.count >= this.properties.max) return   // 限制加数的最大值      this.setData({        count: this.data.count + 1      })    }  }})

                    • index.wxml

                      ----------------------------------------------

                      在小程序的组件中，properties 属性和 data 数据的用法相同，它们都是可读可写的，只不过：

                      • data 更倾向于存储组件的私有数据
                      • properties 更倾向于存储外界传递给组件的数据

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

                        • 自定义组件.wxml

                          // 在自定义组件 .wxml 文件中使用 properties 属性的值 max属性的值：{{ max }} 

                          • 自定义组件.js

                            Component({  properties: { max: Number },// 定义属性  methods: {    addCount() {      this.setData({ max: this.properties.max + 1 })// 使用 setData 修改属性的值    }  }})

                            数据监听器

                            基本概念：

                            数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下：

                            具体演示：

                            • 自定义组件.wxml

                              {{ n1 }} + {{ n2 }} = {{ sum }}n1自增n2自增

                              • 自定义组件.js

                                Component({  // 组件的属性列表  properties: {},  // 组件的初始数据  data: {    n1: 0,    n2: 0,    sum: 0  },  // 组件的方法列表  methods: {    addN1() { this.setData({ n1: this.data.n1 + 1 }) },    addN2() { this.setData({ n2: this.data.n2 + 1 }) },  },  // 数据监听节点  observers: {    'n1, n2': function(n1, n2) {      // 监听 n1 和 n2 数据的变化      this.setData({ sum: n1 + n2 })  // 通过监听器，自动计算 sum 的值    }  }})

                                • index.wxml

                                  ----------------------------------------------

                                  纯数据字段

                                  基本概念：

                                  "纯数据字段"指的是那些不用于界面渲染的 data 字段

                                  应用场景：

                                  有些情况下，某些 data 中的字段既不会展示到页面上，也不需要传递给其他组件，仅仅在当前组件内部使用，带有这种特性的 data 字段适合被设置为纯数字字段

                                  优势好处：

                                  纯数据字段有助于提升页面更新的性能

                                  使用规则：

                                  Component({options: {// 指定所有 _ 开头的数据字段为纯数据字段pureDataPattern: /^_/},data: {a: true,// 普通数据字段_b: true,// 纯数据字段}})

                                  组件的全部生命周期函数

                                  上面这些生命周期函数中，有三个比较重要，分别是 created、attached、detached

                                  • 组件实例刚被创建好的时候，created 函数会被触发

                                    此时还不能调用 setData通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段

                                    • 在组件完全初始化完毕，进入页面节点树后，attached 函数会被触发

                                      此时，this.data 已经被初始化完毕这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如：发请求获取初始数据）

                                      • 在组件离开页面节点树后，detached 函数会被触发

                                        退出一个页面时，会触发页面内每个自定义组件的 detached 函数此时，适合做一些清理性质的工作

                                        lifetimes 节点

                                        Component({// 使用生命周期函数lifetimes: {attached() {...},// 在组件实例进入页面节点树时执行detached() {...},// 在组件实例被从页面节点树移除时执行}})

                                        组件所在页面的生命周期

                                        概念：自定义组件的行为依赖于页面状态的变化，此时就需要用到"组件所在页面的生命周期"

                                        使用：组件所在页面的生命周期函数，需要定义在 pageLifetimes 节点中

                                        Component({pageLifetimes: {show: function() {...},// 页面被展示hide: function() {...},// 页面被隐藏resize: function(size) {...},// 页面尺寸变化}})

                                        插槽

                                        概念：在自定义组件的 wxml 结构中，可以提供一个 节点（插槽），用于承载组件使用者提供的 wxml 结构

                                        单个插槽：每个小程序中，默认每个自定义组件中只允许使用一个进行占位，这种个数上的限制叫做单个插槽

                                        • 自定义.wxml

                                            组件内部节点（上）    组件内部节点（下）

                                          • index.wxml

                                            这里是index  这些文字是插入到组件slot中的

                                            • 运行结果

                                              这里是index组件内部节点（上）这些文字是插入到组件slot中的组件内部节点（下）

                                              启用多个插槽：在小程序的自定义组件中，需要使用多个 插槽时，可以在组件的 .js 文件中，通过如下方式进行启用：

                                              • 自定义组件.js

                                                Component({options: {multipleSlots: true// 在组件定义时的选项中启用多 slot 支持}})

                                                • 自定义组件.wxml

                                                    组件内部节点（上）      组件内部节点（下）

                                                  • index.wxml

                                                    这里是index  1111 - 这些文字是插入到组件slot中的  2222 - 这些文字是插入到组件slot中的

                                                    • 运行结果

                                                      这里是index组件内部节点（上）1111 - 这些文字是插入到组件slot中的2222 - 这些文字是插入到组件slot中的组件内部节点（下）

                                                      父子组件通信

                                                      三种方式：

                                                      • 属性绑定

                                                        用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据

                                                        • 事件绑定

                                                          用于子组件向父组件传递数据，可以传递任意数据

                                                          • 通过组件实例

                                                            父组件还可以通过 this.selectComponent() 获取子组件实例对象这样就可以直接访问子组件的任意数据和方法

                                                            方式一：属性绑定：

                                                            父向子传递数据，只能传递普通类型的数据，无法传递方法

                                                            // 父组件的 data 节点data: {count: 0}// 父组件的 wxml 结构