微信小程序組件傳值圖示過程詳解
更新時間：2019年07月31日 17:04:04 作者：前端來入坑
這篇文章主要介紹了微信小程序組件傳值圖示過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
A是父組件，B是子組件
父傳子
<!-- 父組件A wxml -->
<view>
<componentB paramAtoB='{{paramAtoB}}'></componentB>
</view>
//父組件Ajson （里面不能有注釋）
{
"navigationBarTitleText": "父子傳值",
"usingComponents": {
"componentB": "../../components/son/son"
}
}
//父組件A js
// view/father/father.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
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({
/**
* 頁面的初始數(shù)據(jù)
*/
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中傳入?yún)?shù)</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": {}
}
原先效果
點擊按鈕之后
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了js圖片輪播手動切換特效，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
本文主要介紹了js實現(xiàn)axios限制請求隊列，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧2021-07-07
通過JavaScript使Div居中并隨網(wǎng)頁大小改變而改變
自己的頁面太難看了，要居中沒居中，要顏色沒顏色，但是無論是怎么樣都得使登錄的框居中吧，下面與大家分享下通過JavaScript可以簡單的使Div在頁面上居中，隨著網(wǎng)頁大小的改變做出相應的改變2013-06-06
這篇文章主要介紹了微信小程序-頁面間值傳遞的2種方法，每種方法通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
在每年的10月24日,我們都會慶祝程序員節(jié),這是一個向所有辛勤工作、創(chuàng)造出無數(shù)令人驚嘆應用和系統(tǒng)的程序員們致敬的日子,為了紀念這個特殊的日子,我們將通過編寫一個簡單的1024小游戲來向所有程序員們表示敬意,本文將詳細解釋如何使用JavaScript編寫這個小游戲2023-10-10
input 標簽實現(xiàn)輸入框帶提示文字效果(兩種方法)
這篇文章主要介紹了input 標簽實現(xiàn)輸入框帶提示文字效果(兩種方法),需要的朋友可以參考下2017-10-10
這篇文章主要為大家詳細介紹了Bootstrap表單布局樣式源代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要介紹了JS中input表單隱藏域及其使用方法講解，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
控制打印時頁眉角的代碼...2007-02-02
layui使用form表單實現(xiàn)post請求頁面跳轉的方法
今天小編就為大家分享一篇layui使用form表單實現(xiàn)post請求頁面跳轉的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09