溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

微信小程序中怎么實現組件通訊

發布時間:2021-06-15 16:46:27 來源:億速云 閱讀:202 作者:Leah 欄目:web開發

這篇文章給大家介紹微信小程序中怎么實現組件通訊,內容非常詳細,感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。

(1)父組件向子組件傳值:

<header title='{{title}}' bind:fn='fn' id='header'></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() //子組件的方法
 },

關于微信小程序中怎么實現組件通訊就分享到這里了,希望以上內容可以對大家有一定的幫助,可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女