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
内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/long-mao-bu-re/p/15178390.html

你还没有登录,请先登录注册
  • 还没有人评论,欢迎说说您的想法!