【W(wǎng)ePY小程序框架實(shí)戰(zhàn)三】-組件傳值
標(biāo)簽:
JavaScript
父子组件传值
静态传值
静态传值为父组件向子组件传递常量数据,因此只能传递String字符串类型。
父组件 (parent.wpy)
<view> <child name="leinov"></child></view>
子组件(child.wpy)
<template lang="wxml">
<view>
{{name}}
</view></template><script>
props={ name:String
}
onLoad(){ console.log(this.name);//leinov
}
</script>动态传值
sync修饰符来达到父组件数据绑定至子组件的效果
也可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果
如果既使用.sync修饰符,同时子组件props中添加的twoWay: true时,就可以实现数据的双向绑定了。
异步数据父子组件传值注意
parent
<script>
export default class Parents extends wepy.page {
data = { tabdata:{}, //下面要用这里必须要写上
}
async onLoad() {
let data = await getData(,"public/data",{session_key:"1234456"}); this.tabdata= data.tab; this.$apply();//必须
}
}</script><template lang="wxml">
<view class="title" slot="title"></view>
<view class="title" slot="content">
<Tab :tab.sync="tabdata" ></Tab>
</view></template>child
<template lang="wxml">
<view class="title" slot="title">{{tab}}</view></template>export default class Tab extends wepy.component {
props = {
tab:{ type:Object, default:null,
twoWay:true
}
}以下必须注意
模版中要给子组件传的值 在data里要声明好
取到异步值后要使用this.$apply()手动更新组件
在父组件中调用子组件的属性名要加.sync
子组件要使用父组件的props必须在props里声明
原文出处:https://www.cnblogs.com/leinov/p/9570916.html
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評論
評論
共同學(xué)習(xí),寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦