成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

微信小程序：父子間組件傳參

zollero / 3564人閱讀

摘要：創(chuàng)建組件打開(kāi)微信開(kāi)發(fā)者工具，創(chuàng)建組件，會(huì)生成四個(gè)文件在中我是組件在中私有數(shù)據(jù)，可用于模版渲染生命周期函數(shù)，可以為函數(shù)，或一個(gè)在段中定義的方法名在中即組件創(chuàng)建完成引入組件要在中引入組件，則在中在中微信小程序組件傳參則組件就能夠顯示，要使得組件

1.創(chuàng)建組件

打開(kāi)微信開(kāi)發(fā)者工具，創(chuàng)建組件，會(huì)生成四個(gè)文件：wxml,wxss,js,json

在wxml中：

我是組件A

在js中：

Component({

  behaviors: [],

  properties: {
   
  },
  data: {
  
  }, // 私有數(shù)據(jù)，可用于模版渲染

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

  methods: {
   
  }

})

在json中：

{
  "component": true,
  "usingComponents": {}
}

即組件創(chuàng)建完成

2.引入組件

要在index中引入組件，則

在index.json中：

{
  "usingComponents": {
    "componentA": "../../components/child1/child1"
  }
}

在index.wxml中：


    微信小程序組件傳參

則組件就能夠顯示，要使得組件引入，先要在json中去給組件定義一下才可在wxml中顯示

3.父組件向子組件傳參

聲明：A組件為父組件，B組件為子組件，以下是A組件向B組件傳參：

在A組件中引入B組件

在A組件的json中寫(xiě)入：

{
  "component": true,
  "usingComponents": {
    "componentB": "../child2/child2"
  }
}

在A組件的wxml中寫(xiě)入：

我是組件A

   子組件內(nèi)容：

在B組件的js中寫(xiě)入：

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

  }, // 私有數(shù)據(jù)，可用于模版渲染

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

  methods: {

  }

})

即在properties中定義A組件要傳過(guò)來(lái)的參數(shù)類(lèi)型

在B組件的wxml中寫(xiě)入：


我是組件B
A中傳入的參數(shù)：{{paramAtoB}}

總結(jié)： A組件向B組件傳參，實(shí)際上就是在A組件中引入B組件的時(shí)候，帶上一個(gè)屬性paramAtoB，并且給其賦值，然后B組件通過(guò)這個(gè)屬性名稱(chēng)paramAtoB，獲取其值

4.子組件向父組件傳參

聲明：A組件為父組件，B組件為子組件，以下是B組件向A組件傳參：

要讓子組件給父組件傳參，首先得在父組件引入子組件的時(shí)候，加個(gè)觸發(fā)事件，如下：

在父組件A中wxml:


我是組件A

   A組件內(nèi)容：
   B組件傳入?yún)?shù)：{{paramBtoA}}

myevent就是綁定的觸發(fā)事件

在父組件A中js:

Component({

  behaviors: [],

  properties: {
   
  },
  data: {

  }, // 私有數(shù)據(jù)，可用于模版渲染

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

  methods: {
    onMyEvent:function(e){
      this.setData({
        paramBtoA: e.detail.paramBtoA
      })
    }
  }

})

onMyEvent就是當(dāng)被子組件觸發(fā)時(shí)的函數(shù)

在子組件B中wxml:


我是組件B
A中傳入的參數(shù)：{{paramAtoB}}

button按鈕點(diǎn)擊事件一觸發(fā)，就可以傳入?yún)?shù)進(jìn)入父組件A中，在子組件B中js:

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

  }, // 私有數(shù)據(jù)，可用于模版渲染

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

  methods: {
    change:function(){
      this.triggerEvent("myevent", { paramBtoA:123});
    }
  }

})

this.triggerEvent就是按鈕點(diǎn)擊之后執(zhí)行的事件，觸發(fā)myevent事件，傳入?yún)?shù)paramBtoA進(jìn)入父組件

以上就是微信小程序父子組件之間的傳參，后期如果有新發(fā)現(xiàn)會(huì)不定期更新！

源碼地址：https://github.com/CandyGo/wx...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95586.html

相關(guān)文章

  • vue和微信小程序的區(qū)別、比較

    摘要：相比之下，小程序的鉤子函數(shù)要簡(jiǎn)單得多。一生命周期先貼兩張圖生命周期小程序生命周期相比之下，小程序的鉤子函數(shù)要簡(jiǎn)單得多。的鉤子函數(shù)在跳轉(zhuǎn)新頁(yè)面時(shí)，鉤子函數(shù)都會(huì)觸發(fā)，但是小程序的鉤子函數(shù)，頁(yè)面不同的跳轉(zhuǎn)方式，觸發(fā)的鉤子并不一樣。 前言 寫(xiě)了vue項(xiàng)目和小程序，發(fā)現(xiàn)二者有許多相同之處，在此想總結(jié)一下二者的共同點(diǎn)和區(qū)別。相比之下，小程序的鉤子函數(shù)要簡(jiǎn)單得多。 寫(xiě)了vue項(xiàng)目和小程序，發(fā)現(xiàn)二者有...

    yck 評(píng)論0 收藏0

  • vue和微信小程序的區(qū)別、比較

    摘要：相比之下，小程序的鉤子函數(shù)要簡(jiǎn)單得多。一生命周期先貼兩張圖生命周期小程序生命周期相比之下，小程序的鉤子函數(shù)要簡(jiǎn)單得多。的鉤子函數(shù)在跳轉(zhuǎn)新頁(yè)面時(shí)，鉤子函數(shù)都會(huì)觸發(fā)，但是小程序的鉤子函數(shù)，頁(yè)面不同的跳轉(zhuǎn)方式，觸發(fā)的鉤子并不一樣。 前言 寫(xiě)了vue項(xiàng)目和小程序，發(fā)現(xiàn)二者有許多相同之處，在此想總結(jié)一下二者的共同點(diǎn)和區(qū)別。相比之下，小程序的鉤子函數(shù)要簡(jiǎn)單得多。 寫(xiě)了vue項(xiàng)目和小程序，發(fā)現(xiàn)二者有...

    mcterry 評(píng)論0 收藏0

  • 使用Labrador 0.4構(gòu)建組件化自動(dòng)化測(cè)試微信小程序

    摘要：自定義組件的自定義組件，是基于微信小程序框架的組件之上，進(jìn)一步自定義組合，擁有邏輯處理和樣式。這樣做的目的請(qǐng)參見(jiàn)微信小程序開(kāi)發(fā)三宗罪和解決方案項(xiàng)目中通用自定義組件存放在目錄，一個(gè)組件一般由三個(gè)文件組成，和分別對(duì)應(yīng)微信小程序框架的和文件。 Labrador 是一個(gè)專(zhuān)為微信小程序開(kāi)發(fā)的組件化開(kāi)發(fā)框架。 特性 使用Labrador框架可以使微信開(kāi)發(fā)者工具支持加載海量NPM包 支持ES6/7...

    LiuRhoRamen 評(píng)論0 收藏0

  • react 和 小程序 對(duì)比

    摘要：主要從以下幾個(gè)方面對(duì)比下和微信小程序生命周期小程序頁(yè)面加載時(shí)觸發(fā)。數(shù)據(jù)綁定小程序中的動(dòng)態(tài)數(shù)據(jù)均來(lái)自對(duì)應(yīng)的。例如顯示與隱藏元素小程序在微信小程序中使用和來(lái)控制組件的顯示與隱藏。 主要從以下幾個(gè)方面對(duì)比下react和微信小程序 生命周期 react 小程序 onLoad: 頁(yè)面加載時(shí)觸發(fā)。一個(gè)頁(yè)面只會(huì)調(diào)用一次，可以在onload的參數(shù)options中獲取打開(kāi)當(dāng)前頁(yè)面路徑中的參數(shù)。 ...

    Lowky 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<