【WePY小程序框架实战三】-组件传值

• 【WePY小程序框架实战一】-创建项目
• 【WePY小程序框架实战二】-页面结构

父子组件传值

静态传值

静态传值为父组件向子组件传递常量数据，因此只能传递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里声明