微信小程序开发(七)-自定义组件

一 . 自定义组件

类似vue或者react中的自定义组件

 

1. 创建⾃定义组件

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

在⽂件夹内 components/myHeader，创建组件 名为 myHeader

 

2.声明组件

 

⾸先需要在组件的 json⽂件中进⾏⾃定义组件声明

myHeader.json

{
  "component": true
}

3. 注册组件

在组件的 js⽂件中，需要使⽤ Component()来注册组件，并提供组件的属性定义、内部数据和⾃定义⽅法

 

myHeader.js


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

4.声明引⼊⾃定义组件

⾸先要在⻚⾯的 json⽂件中进⾏引⽤声明。还要提供对应的组件名和组件路径

 

index.wxml

 // 引用声明
  "usingComponents": {
 // 要使用的组件的名称     // 组件的路径
    "my-header":"/components/myHeader/myHeader"
 }
}

5.⻚⾯中使⽤⾃定义组件

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

6.定义段与⽰例⽅法

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

 

 

7.组件-⾃定义组件传参

1. ⽗组件通过属性的⽅式给⼦组件传递参数

2. ⼦组件通过事件的⽅式向⽗组件传递参数

过程：

1. ⽗组件 把数据 {{tabs}}传递到 ⼦组件的 tabItems属性中

2. ⽗组件 监听 onMyTab事件

3. ⼦组件 触发 bindmytap中的 mytap事件

　　a,⾃定义组件触发事件时，需要使⽤ 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');
   }
 }
})