您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關微信小程序中怎么實現(xiàn)組件傳值,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內容,希望大家根據這篇文章可以有所收獲。
父傳子
<!-- 父組件A wxml --> <view> <componentB paramAtoB='{{paramAtoB}}'></componentB> </view>
//父組件Ajson (里面不能有注釋)
{ "navigationBarTitleText": "父子傳值", "usingComponents": { "componentB": "../../components/son/son" } }
//父組件A js // view/father/father.js Page({ /** * 頁面的初始數據 */ data: { paramAtoB: "我是A向B傳值" } })
<!-- 子組件B wxml --> <view class="inner"> {{paramAtoB}} </view>
//子組件B js Component({ //B在這里接收與data類似可以直接在wxml上用 properties: { paramAtoB: { type: String,//類型 value: 'default value'//默認值 } }, data: { } })
//子組件B json
{ "component": true, "usingComponents": {} }
效果
子傳父
<!-- 父組件A wxml --> <view> <componentB paramAtoB='{{paramAtoB}}' bind:myevent="onMyEvent"></componentB> {{ paramBtoA }} </view>
// view/father/father.js Page({ /** * 頁面的初始數據 */ data: { paramAtoB: "我是A向B傳值", paramBtoA: 1122 }, onMyEvent: function (e) { //通過事件接收 this.setData({ paramBtoA: e.detail.paramBtoA }) } })
//父組件A json (里面不能有注釋)
{ "navigationBarTitleText": "父子傳值", "usingComponents": { "componentB": "../../components/son/son" } }
<!-- 子組件B wxml --> <view class="inner"> {{paramAtoB}} <button bindtap='change'>向A中傳入參數</button> </view>
(注意:子組件的方法需要寫在methods:{}里面)
//子組件B js Component({ //B在這里接收與data類似可以直接在wxml上用 properties: { paramAtoB: { type: String,//類型 value: 'default value'//默認值 } }, data: { }, methods: { //觸發(fā)change事件向A傳值 change: function () { this.triggerEvent('myevent', { paramBtoA: "666傳值成功" }); } } })
//子組件B json
{ "component": true, "usingComponents": {} }
原先效果
點擊按鈕之后
看完上述內容,你們對微信小程序中怎么實現(xiàn)組件傳值有進一步的了解嗎?如果還想了解更多知識或者相關內容,請關注億速云行業(yè)資訊頻道,感謝大家的支持。
免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。