前言

今天我们一起看看小程序中如何创建组件，如何使用组件？再来看一看组件和页面的区别，最后来看看组件都有哪些数据、方法和属性~

一、组件的创建和引用

1. 如何创建组件？

在项目的根目录中，鼠标右键，创建 components -> test 文件夹
在新建的 components -> test 文件夹上，鼠标右键，点击 新建 Component
键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为 .js ， .json ， .wxml 和 .wxss
注意：为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中

在这里插入图片描述

2. 如何引用组件？

组件的引用方式组件的引用方式分为 局部引用 和 `全局引用
- 局部引用：组件只能在当前被引用的页面内使用
- 全局引用：组件可以在每个小程序页面中使用
局部引用组件在页面的 .json 配置文件中引用组件的方式，叫做 局部引用

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

// 在页面的 .wxml 文件中，使用组件
<my-test1></my-test1>

全局引用组件在 app.json 全局配置文件中引用组件的方式，叫做 全局引用

// 在 app.json 文件中，引入组件
{
  "pages": [/* 省略不必要的代码 */],
  "window": {/* 省略不必要的代码 */},
  "usingComponents": {
    "my-test2": "/components/test2/test2"
  }
}

// 在页面的 .wxml 文件中，使用组件
<my-test2></my-test2>

全局引用和局部引用的区别
- 如果某组件在多个页面中经常被用到，建议进行 全局引用
- 如果某组件只在特定的页面中被用到，建议进行 局部引用

3. 组件和页面的区别

从表面来看，组件和页面都是由 .js 、 .json 、 .wxml 和 .wxss 这四个文件组成的。但是，组件和页面的 .js 与 .json 文件有明显的不同：

组件的 .json 文件中需要声明 "component": true 属性
组件的 .js 文件中调用的是 Component() 函数
- 整个程序启动调用的是 App()
- 某个页面的渲染调用的是 Page()
- 某个组件的渲染调用的是 Component()
组件的事件处理函数需要定义到 methods 节点中

二、组件的数据、方法和属性

1. 定义 data 私有数据

在小程序组件中，用于组件模板渲染的私有数据，需要定义到 data 节点中

Component({
  /**
  * 组件的初始数据
  */
  data: {
    count: 0
  }
})

2. methods 方法

在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中

Component({
  methods: {                 // 组件的方法列表【包含事件处理函数和自定义方法】
    addCount() {             // 事件处理函数
      this.setData({count: this.data.count + 1})
      this._showCount()      // 通过 this 直接调用自定义方法
    },
    _showCount() {           // 自定义方法建议以 _ 开头
      wx.showToast({
        title: 'count值为：' + this.data.count,
        icon: 'none'
      })
    }
  }
})

3. 定义 properties 属性

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

Component({
  // 属性定义
  properties: {
    max: {             // 完整定义属性的方式【当需要指定属性默认值时，建议使用此方式】
      type: Number,    //属性值的数据类型
      value: 10        //属性默认值
    },
    max: Number        // 简化定义属性的方式【不需指定属性默认值时，可以使用简化方式】
  }
})

4. 使用 max 属性控制自增的最大值

给组件标签添加 max 属性控制自增的最大值

Component({
  // 属性定义
  properties: {
    max: {              // 完整定义属性的方式【当需要指定属性默认值时，建议使用此方式】
      type: Number,    // 属性值的数据类型
      value: 10       // 属性默认值
    },
    max: Number      // 简化定义属性的方式【不需指定属性默认值时，可以使用简化方式】
  }
})

<my-test1 max="10"></my-test1>

5. data 和 properties 的区别

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

data 更倾向于存储组件的私有数据
properties 更倾向于存储外界传递到组件中的数据
所以, 也不太建议修改 properties 数据,如果要修改 properties 的数据, 最好通过子组件通信给父组件的方式实现

Component({
  methods: {
    showInfo() {
      console.log(this.data)           // 输出结果： {count: 0, max: 10}
      console.log(this.properties)    // 输出结果：{count: 0, max: 10}
      // 结果为 true，证明 data 数据和 properties 属性【在本质上是一样的，都是可读可写】
      console.log(this.data --- this.properties)
    }
  }
})

6. 使用 setData 修改 properties 的值

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

<view>max属性的值为：{{ max }} </view>

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

总结

Better late than never.

微信小程序——组件相关

前言