父子组件传值

静态传值

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

【WePY小程序框架实战三】-组件传值的更多相关文章

  1. 【WePY小程序框架实战四】-使用async&await异步请求数据

    [WePY小程序框架实战一]-创建项目 [WePY小程序框架实战二]-页面结构 [WePY小程序框架实战三]-组件传值 async await 是对promise的近一步优化,既解决了promise链 ...

  2. 【WePY小程序框架实战二】-页面结构

    [WePY小程序框架实战一]-创建项目 项目结构 |-- dist |-- node_modules |-- src | |-- components |-- a.wpy |-- b.wpy |-- ...

  3. 【WePY小程序框架实战一】-创建项目

    最近两个小程序项目使用了微信自己出的框架wepy开发,开发完的感受就是比原生小程序顺溜很多.我就从安装到一些重点和整个项目把wepy使用整理下 全局安装WePY命令行工具 npm install we ...

  4. 应用程序框架实战三十八:项目示例VS解决方案的创建(一)

    进行项目开发的第一步,是创建出适合自己团队习惯的VS解决方案,虽然我已经提供了项目示例,但毕竟是我创建的,你直接使用可能并不合适,另外你如果尝试模仿重新创建该示例,中间可能碰到各种障碍,特别是项目间的 ...

  5. 应用程序框架实战三十六:CRUD实战演练介绍

    从本篇开始,本系列将进入实战演练阶段. 前面主要介绍了一些应用程序框架的概念和基类,本来想把所有概念介绍完,再把框架内部实现都讲完了,再进入实战,这样可以让初学者基础牢靠.不过我的精力很有限,文章进度 ...

  6. 应用程序框架实战三十三:表现层及ASP.NET MVC介绍(二)

    最近的更新速度越来越慢,主要是项目上比较忙,封装EasyUi也要花很多时间.不过大家请放心,本系列不会半途夭折,并且代码干货也会持续更新.本文继续介绍表现层和Asp.net Mvc,我将在本篇讨论一些 ...

  7. 应用程序框架实战三十七:Util最新代码更新说明

    离上一篇又过去了一个月,时间比较紧,后续估计会更紧,所以这次将放出更多公共操作类及配套的CodeSmith模板,本篇将简要介绍新放出的重要功能,供有兴趣的同学参考. 重要更新 这一次对两个VS解决方案 ...

  8. 应用程序框架实战三十四:数据传输对象(DTO)介绍及各类型实体比较

    本文将介绍DDD分层架构中广泛使用的数据传输对象Dto,并且与领域实体Entity,查询实体QueryObject,视图实体ViewModel等几种实体进行比较. 领域实体为何不能一统江湖? 当你阅读 ...

  9. 应用程序框架实战三十:表现层及ASP.NET MVC介绍(一)

    本文将介绍表现层及ASP.NET MVC的一些要点,特别是ASP.NET MVC的一些抽象和封装技巧,如果你对MVC还不了解,可以参考<ASP.NET MVC4 高级编程>,作者Jon G ...

随机推荐

  1. 个人作业四--Alpha阶段个人总结

    一.个人总结 在alpha 结束之后, 每位同学写一篇个人博客, 总结自己的alpha 过程: 请用自我评价表:http://www.cnblogs.com/xinz/p/3852177.html 有 ...

  2. .net core 与ELK(3)安装Kibana

    1.去产品官网下载https://www.elastic.co/downloads/kibana 对应的tar.gz的压缩包,放到/usr/local/src目录 2.解压 -linux-x86_64 ...

  3. 【BZOJ3160】 万径人踪灭(FFT,manacher)

    前言 多项式真的很难♂啊qwq Solution 考虑求的是一个有间隔的回文串,相当于是: 总的答案-没有间隔的答案 考虑总的答案怎么计算?FFT卷一下就好了. 对于每一位字符,有两种取值,然后随便卷 ...

  4. mysql查询语句分析 explain/desc用法

    explain或desc显示了mysql如何使用索引来处理select语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句. explain 数据表 或 desc 数据表 显示数据表各字段含义 ...

  5. Linux 中指定启动 tomcat 的 jdk 版本

    环境: RHEL6.5. tomcat8.5.jdk1.8.0_181 修改 catalina.sh.setclasspath.sh 文件 进入目录 $ cd /data01/server/apach ...

  6. Shell - 简明Shell入门06 - 循环语句(Loop)

    示例脚本及注释 #!/bin/bash # for循环 for filename in t1 t2 t3 do touch $filename.txt echo "Create new fi ...

  7. Python小白学习之路(二十六)—【if __name__ =='__main__':】【用状态标识操作】

    规则一: 一个python文件中,只写一些可以运行的功能测试代码写在这句代码下面 if __name__ =='__main__': 在讲这边的时候,我不是很懂参考了一篇博客,地址如下:http:// ...

  8. redis安装(linux)

    redis安装 1. 安装tcl # cd /usr/local # wget http://downloads.sourceforge.net/tcl/tcl8.6.1-src.tar.gz # t ...

  9. 线程中的同步辅助类Semaphore

    同步辅助类  线程池  并发集合类 都是在线程同步的基础上增加了一些同步的东西,在线程同步的基础上更好的实现线程同步.实现的效率更高,更方便而已. 多线程并不是很难 需要你把代码写出来...然后分析运 ...

  10. apt 下载安装包

    1) Try both without sudo, apt-get download will pass and apt-get -d install will fail (root required ...