微信小程序学习笔记四 自定义组件

1. 自定义组件

类似Vue或react中的自定义组件

小程序允许我们使用自定义组件的方式来构建页面

1.1 创建自定义组件

类似于页面, 一个自定义组件由json wxml wxss js 4个文件组成

可以在微信开发者工具中快速创建组件的文档结构



在文件夹内 components/myHeader, 创建组件 名为myHeader

1.1.1 声明组件

• 首先需要在组件的 json文件中进行自定义组件声明
  
  myHeader.json

{
  "component": true,
}

---

1.1.2 编辑组件

• 同时, 还要再组件的wxml文件中编写组件模板, 在 wxss文件中加入组件样式, slot表示插槽, 类似Vue中的slot
  
  myHeader.wxml

<!--components/myHeader/myHeader.wxml-->
<view class="inner">
  {{innerText}}
  <slot></slot>
</view>

• 在组件的wxss文件中编写样式

注意: 在组件中wxss不应该使用ID选择器、属性选择器和标签名选择器。

myHeader.wxss

/* components/myHeader/myHeader.wxss */
/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

1.3 注册组件

• 在组件的js文件中, 需要使用Component()来注册组件, 并提供组件的属性定义、内部数据和自定义方法

myHeader.js

// components/myHeader/myHeader.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 这里定义了innerText属性, 属性值可以在组件使用时指定
    innerText:{
      // 期望要的数据都是 string类型
      type: String,
      // 默认值
      value: "default value",
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    // 这里是一些组件内部的数据
    someData:{}
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 这里是一个组件内的自定义方法
    selfMethod(){}
  }
})

---

1.2. 声明引入自定义组件

首先要在页面的json文件中进行引用声明, 还要提供对应的组件名和组件路径 index.wxml

{
 // 引用声明
 "usingComponents": {
   "my-header": "/components/myHeader/myHeader"
 }
}

---

1.3 页面中使用自定义组件

  <!-- 自定义组件测试 -->
  <view>
    <!-- 以下是对一个自定义组件的引用 -->
    <my-header inner-text="Some text">
      <view>用来替代slot的</view>
    </my-header>
  </view>

---

2. 其他属性

Component 构造器可⽤于定义组件，调⽤ Component 构造器时可以指定组件的属性、数据、⽅法

等。

定义段	类型	是否必填	描述
properties	Object Map	否	组件的对外属性, 是属性名到属性设置的映射表, 参见下文
data	Object	否	组件的内部数据, 和properties 一同用于组件的模板渲染
observers	Object	否	组件数据字段监听器, 用于监听properties 和 data 的变化
methods	Object	否	组件的方法, 包括事件响应函数和任意的自定义方法
created	Function	否	组件生命周期函数, 在组件实例刚刚被创建时执行, 注意此时不能调用setData
attached	Function	否	组件生命周期函数, 在组件实例进入页面节点树时执行
ready	Function	否	组件生命周期函数, 在组件实例进入页面节点树时执行
moved	Function	否	组件生命周期函数, 在组件实例被移动到节点树另一个位置时执行
detached	Function	否	组件生命周期函数, 在组件实例被从页面节点树移除时执行

---

3. 自定义组件传参

1. 父组件通过属性 的方式给子组件传递参数
2. 子组件通过事件的方式向父组件传递参数

3.1 过程

1. 父组件把数据{{tabs}} 传递到 子组件 的 tabItems 属性中
2. 父组件 监听 onMyTab 事件
3. 子组件 触发bindmytap中的mytap 事件
   1. 自定义组件触发事件时, 需要使用 triggerEvent方法, 指定事件名、detail对象
4. 父 → 子 动态传值 this.selectComponent("#tabs");

父组件代码

// page.wxml
<tabs tabItems="{{tabs}}" bindmytap="onMyTab" >
 内容-这里可以放插槽
</tabs>

// page.js
  data: {
    tabs:[
     {name:"体验问题"},
     {name:"商品、商家投诉"}
   ]
 },
  onMyTab(e){
    console.log(e.detail);
 },

子组件代码

// com.wxml
<view class="tabs">
  <view class="tab_title"  >
    <block  wx:for="{{tabItems}}" wx:key="{{item}}">
      <view bindtap="handleItemActive" data-index="{{index}}">{{item.name}}</view>
    </block>
  </view>
  <view class="tab_content">
    <slot></slot>
  </view>
</view>

// com.js
Component({
  properties: {
    tabItems:{
      type:Array,
      value:[]
   }
 },
  /**
   * 组件的初始数据
   */
  data: {
 },
  /**
   * 组件的方法列表
   */
  methods: {
    handleItemActive(e){
      this.triggerEvent('mytap','haha');
   }
 }
})

---

4. 注意事项

1. 标签名 是 中划线的方式 -
2. 属性名的方式 也是要中划线的方式
3. 其他情况可以使用驼峰命名
   1. 组件的文件名如 myHeader.js的等
   2. 组件内的要接收的属性名 如 innerText