微信小程式中元件通訊的介紹（程式碼範例）

本篇文章帶給大家的內容是關於微信小程式中元件通訊的介紹（程式碼範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

這篇主要講組件通訊

（1）父元件傳送值給子元件：

 <header title=&#39;{{title}}&#39; bind:fn=&#39;fn&#39; id=&#39;header&#39;></header>

透過title='{{title}}'傳向子元件傳遞參數給子元件

子元件接收參數：

Component({
  properties: {
    title: {       // 属性名 type: Number, // 类型（必填）
      type: String,//目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
    },
    fn: {      
      type: Function,
    },
  },
  data: {
      
  },
  methods: {
    // 子组件调用父组件方法
    childFn() {
      console.log(this.data.title)
      this.triggerEvent("fn");
      //triggerEvent函数接受三个值：事件名称、数据、选项值  
    }
  }
})

methods使用title時 this.data.title 直接就可以取得

透過 bind:fn='fn '傳向子元件傳遞方法給子元件

##也同樣也要在properties接收,methods裡定義一個新方法, this.triggerEvent("fn") 接收父元件傳遞過來的方法

（2）父元件呼叫子元件資料及方法：

首先在父元件js onReady 生命週期中取得到元件

onReady: function () {
    //获得popup组件
    this.header= this.selectComponent("#header");
},

 例如要呼叫子元件的一個function方法

 // 调用子组件方法
  fn(){
    this.header.fn() //子组件的方法
  },

 呼叫子元件資料的話直接 this.header.msg 就可以拿到子元件的資料

以上是微信小程式中元件通訊的介紹（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！