1.創(chuàng)建 header 組件

1.1 選中文件夾，右鍵新建 Component。 暫命名為 header

1.2 header.js 文件配置組件屬性與方法

交互關(guān)鍵方法?? this.triggerEvent('subClickEvent', '來自 子組件 的信號這個是 參數(shù)')

Component({

 //組件的屬性列表
  properties: {
    /// 屬性名 簡化寫法
    name: String,
    /// 屬性名
    car: {
      type: String,
      value: ''
    }
  },

// 生命周期函數(shù)，可以為函數(shù)，或一個在methods段中定義的方法名
  lifetimes: {
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

// 組件所在頁面的生命周期函數(shù)
  pageLifetimes: {
    show: function () { },
    hide: function () { },
    resize: function () { },
  },


// 組件的初始數(shù)據(jù)
  data: {
    color: '彩色'
  },

// 組件的方法列表
  methods: {

    logP() {
      console.log('pppppp');
    },

    // 組件內(nèi)部先調(diào)用該方法 再調(diào)用父方法
    cllParentClick() {
      //  觸發(fā) subClickEvent 事件， 間接通知在 父組件中 subClickEvent 綁定的 subClick 方法
      //  建議  subClickEvent 與  subClick 命名相同，這個剛接觸感覺會有一點混亂
      // subClickEvent 就是通知名。subClickEvent 這個通知在使用該組件時綁定的，綁定了父組件的 subClick 方法。然后在這里觸發(fā)了 subClickEvent 通知
      this.triggerEvent('subClickEvent', '來自 子組件 的信號這個是 參數(shù)')
    },

    btnClick(e) {
      console.log('開車開車');
    },
    /// 私有方法 下劃線開頭
    _saySelfName() {
      console.log('header');
    }
  }
})

1.3 header.wxml

header 組件內(nèi)容

<view class="header">
  <text>name:{{name}}  car:{{car}}</text>
  <button size="default" type="primary" bind:tap="btnClick">開車開車</button>
  <button size="default" type="primary" bind:tap="cllParentClick">調(diào)用父組件 subClick 方法</button>
</view>

header.wxss

.header {
  background-color: red;
}

2. 使用 header 組件

2.1 page.json

{
  "usingComponents": {
    "header": "../../../components/header/header"
  }
}

2.2 page.wxml

<header id='comHeader' name='朱小明' car='自行車' bind:subClickEvent='subClick'></header>
<button bind:tap="getHeaderInfo">獲取組件屬性</button>

在這里注冊的 subClickEvent 事件，當(dāng) header 組件觸發(fā) subClickEvent 時，調(diào)用 page 的 subClick 方法。 建議將 subClickEvent 與 subClick 命名相同

2.3 page.js

Page({

// header 組件間接調(diào)用該方法
  subClick(e) {
    console.log(e.detail);
  },
  
  // 主動獲取 header 組件實例對象
  getHeaderInfo() {
    /// 獲取組件實例對象  記得加 # 
    let header = this.selectComponent('#comHeader');
    /// 獲取屬性
    console.log(header.properties.color);
    /// 調(diào)用方法
    header.logP();
  },
})