元件引用

全域性引用

在app.json中引用則該元件為全域性元件，供每個頁面呼叫該元件

頁面或元件引用

在對應頁面或者元件的json檔案種新增

頁面佈局

index/index.wxml

<view>index</view>
<parent></parent>

parent/index.wxml

<view>parent</view>
<child></child>

child/index.wxml

<view>child</view>

元件通訊

父元件向子元件傳值

child/index.js

子元件定義屬性

Component({
  properties: {
    like: {
      type: String,
      value: "預設值"
    }
  }, 
}) 

child/index.wxml

子元件展示該屬性

<view>properties.like:{{like}}</view>

效果

parent/index.wxml

父元件傳值

<child like="打遊戲"></child>

效果

父元件呼叫子元件方法

child/index.js

給子元件新增方法

Component({
  properties: {
    like: {
      type: String,
      value: "預設值"
    }
  },
  methods: {
    doLikeThings() {
      console.log(`去${this.properties.like}`);
    }
  }
})
 

parent/index.wxml

新增一個id為music的元件

<child like="聽音樂" id="music"></child>  

parent/index.js

注: 當parent為頁面時，應為 wx.selectComponent

當元件生命週期執行到了ready時呼叫選擇id為music的元件，呼叫元件的doLikeThings方法

Component({
  lifetimes: {
    ready() {
      this.selectComponent("#music").doLikeThings();
    }
  },
})

效果

子元件回撥父元件方法

child/index.js

在子元件載入成功後向父元件傳送事件

lifetimes:{
    ready(){
        this.triggerEvent("loaded", this.properties)
    }
}

parent/index.js

在父元件寫一個方法接受該事件

methods: {
    childLoadedCallBack(e) {
        console.log(e);
    }
}

parent/index.wxml

進行關聯繫結

<child like="寫程式碼" bind:loaded="childLoadedCallBack"></child>

效果