小程序学习笔记（二）——自定义组件

创建自定义组件

1. 类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。
2. 在 json 文件中进行自定义组件声明（将 component 字段设为 true）。
3. 在 wxss 中不应使用 ID 选择器、属性选择器和标签名选择器。
4. 在 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的，需要声明类型和初始值。
5. 组件的属性可以用于接收页面的参数，如访问页面/pages/index/index?paramA=123¶mB=xyz，如果声明有属性 paramA 或 paramB ，则它们会被赋值为 123 或 xyz 。

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

使用自定义组件

1. 需要在引用页面的 json 文件中进行引用声明，此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径。
2. 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
3. 自定义组件和页面所在项目根目录名不能以“wx-”为前缀，否则会报错。

// 引用页面json
{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

// 引用页面wxml

  
  

组件模板

1. 可以使用数据绑定，向子组件的属性传递动态数据。

  
    
    这里是插入到组件slot中的内容
  

2. 在组件模板中可以提供一个 节点，用于承载组件引用时提供的子节点。

  这里是组件的内部节点
  




  
    
    这里是插入到组件slot中的内容
  

3. 需要使用多 slot 时，可以在组件 js 中声明启用。在组件的 wxml 中使用多个 slot ，以不同的 name 来区分。

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



  
  这里是组件的内部细节
  




  
    
    这里是插入到组件slot name="before"中的内容
    
    这里是插入到组件slot name="after"中的内容
  

组件间通信

1. WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据。
2. 事件：用于子组件向父组件传递数据，可以传递任意数据。

• 什么是事件？
  （1）事件是视图层到逻辑层的通讯方式。
  （2）事件可以将用户的行为反馈到逻辑层进行处理。
  （3）事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
  （4）事件对象可以携带额外信息，如 id, dataset, touches。

• 监听事件：自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。

  监听事件

  
  
  
  
  
  Page({
    onMyEvent: function(e){
      e.detail // 自定义组件触发事件时提供的detail对象
    }
  })
  
  

• 触发事件：自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项。

  触发事件

  
  点击这个按钮将触发“myevent”事件
  
  Component({
    properties: {},
    methods: {
      onTap: function(){
        var myEventDetail = {} // detail对象，提供给事件监听函数
        var myEventOption = {} // 触发事件的选项：bubbles，composed，capturePhase
        this.triggerEvent('myevent', myEventDetail, myEventOption)
      }
    }
  })
  

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

• 调用时需要传入一个匹配选择器 selector，如：this.selectComponent(".my-component")。

  使用 selectComponent

  // 父组件
  Page({
    data: {},
    getChildComponent: function () {
      const child = this.selectComponent('.my-component');
      console.log(child)
    }
  })