亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

【WePY小程序框架實戰三】-組件傳值

標簽:
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

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消