• 建立子元件

• 父頁面引入子元件

在父頁面的json中新增元件

  "usingComponents": {
    "custombar": "../../components/custombar/custombar"
  },

在父頁面的wxml中新增元件

  <custombar></custombar>

• 父頁面向子元件傳值

父頁面的wxml中在元件標籤上直接寫需要傳遞的值

<custombar title="hello"></custombar>

在子元件的js中，向properties新增接收傳值的屬性

// components/custombar.js
Component({
  /**
   * 元件的屬性列表
   */
  properties: {
    title: String
  },
})

子元件的wxml中將傳進來的值展示

<text>{{title}}</text>

• 元件的自定義事件

子元件新增點選事件

<view class="button" bindtap="shareClick">點選事件</view>

點選事件裡註冊自定義事件 this.triggerEvent(“myevent”, {data:‘子元件像父頁面傳遞的引數’});

Component({

  ...

  /**
   * 元件的方法列表
   */
  methods: {
    shareClick: function(e) {
      console.log("shareClick");
      this.triggerEvent("shareClick", {data: 'share'});
    },
  }
})

在父頁面引入的子元件標籤上繫結自定義事件

<custombar bind:shareClick="shareClick2" title="分享"/>
 

父頁面處理子元件傳遞過來的引數

Page({

  ...

  shareClick: function(e) {
    console.log(e.detail);
    console.log('shareClick');
  }
})