zoukankan      html  css  js  c++  java
  • 【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里声明
  • 相关阅读:
    linux 文件时间
    linux命令学习 touch
    linux命令学习 cp
    Linux命令学习 mv
    SpringMVC mvc详解
    JDBC原生态代码
    java中静态方法中调用非静态方法的详解
    Spring技术详解
    Spring中的 BeanFactory和 ApplicationContext的区别与解释
    java多线程编程相关技术
  • 原文地址:https://www.cnblogs.com/leinov/p/9570916.html
Copyright © 2011-2022 走看看