微信小程序——组件相关

---

前言

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

---

一、组件的创建和引用

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":