【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里声明
【WePY小程序框架实战三】-组件传值的更多相关文章
- 【WePY小程序框架实战四】-使用async&await异步请求数据
[WePY小程序框架实战一]-创建项目 [WePY小程序框架实战二]-页面结构 [WePY小程序框架实战三]-组件传值 async await 是对promise的近一步优化,既解决了promise链 ...
- 【WePY小程序框架实战二】-页面结构
[WePY小程序框架实战一]-创建项目 项目结构 |-- dist |-- node_modules |-- src | |-- components |-- a.wpy |-- b.wpy |-- ...
- 【WePY小程序框架实战一】-创建项目
最近两个小程序项目使用了微信自己出的框架wepy开发,开发完的感受就是比原生小程序顺溜很多.我就从安装到一些重点和整个项目把wepy使用整理下 全局安装WePY命令行工具 npm install we ...
- 应用程序框架实战三十八:项目示例VS解决方案的创建(一)
进行项目开发的第一步,是创建出适合自己团队习惯的VS解决方案,虽然我已经提供了项目示例,但毕竟是我创建的,你直接使用可能并不合适,另外你如果尝试模仿重新创建该示例,中间可能碰到各种障碍,特别是项目间的 ...
- 应用程序框架实战三十六:CRUD实战演练介绍
从本篇开始,本系列将进入实战演练阶段. 前面主要介绍了一些应用程序框架的概念和基类,本来想把所有概念介绍完,再把框架内部实现都讲完了,再进入实战,这样可以让初学者基础牢靠.不过我的精力很有限,文章进度 ...
- 应用程序框架实战三十三:表现层及ASP.NET MVC介绍(二)
最近的更新速度越来越慢,主要是项目上比较忙,封装EasyUi也要花很多时间.不过大家请放心,本系列不会半途夭折,并且代码干货也会持续更新.本文继续介绍表现层和Asp.net Mvc,我将在本篇讨论一些 ...
- 应用程序框架实战三十七:Util最新代码更新说明
离上一篇又过去了一个月,时间比较紧,后续估计会更紧,所以这次将放出更多公共操作类及配套的CodeSmith模板,本篇将简要介绍新放出的重要功能,供有兴趣的同学参考. 重要更新 这一次对两个VS解决方案 ...
- 应用程序框架实战三十四:数据传输对象(DTO)介绍及各类型实体比较
本文将介绍DDD分层架构中广泛使用的数据传输对象Dto,并且与领域实体Entity,查询实体QueryObject,视图实体ViewModel等几种实体进行比较. 领域实体为何不能一统江湖? 当你阅读 ...
- 应用程序框架实战三十:表现层及ASP.NET MVC介绍(一)
本文将介绍表现层及ASP.NET MVC的一些要点,特别是ASP.NET MVC的一些抽象和封装技巧,如果你对MVC还不了解,可以参考<ASP.NET MVC4 高级编程>,作者Jon G ...
随机推荐
- 个人作业四--Alpha阶段个人总结
一.个人总结 在alpha 结束之后, 每位同学写一篇个人博客, 总结自己的alpha 过程: 请用自我评价表:http://www.cnblogs.com/xinz/p/3852177.html 有 ...
- .net core 与ELK(3)安装Kibana
1.去产品官网下载https://www.elastic.co/downloads/kibana 对应的tar.gz的压缩包,放到/usr/local/src目录 2.解压 -linux-x86_64 ...
- 【BZOJ3160】 万径人踪灭(FFT,manacher)
前言 多项式真的很难♂啊qwq Solution 考虑求的是一个有间隔的回文串,相当于是: 总的答案-没有间隔的答案 考虑总的答案怎么计算?FFT卷一下就好了. 对于每一位字符,有两种取值,然后随便卷 ...
- mysql查询语句分析 explain/desc用法
explain或desc显示了mysql如何使用索引来处理select语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句. explain 数据表 或 desc 数据表 显示数据表各字段含义 ...
- Linux 中指定启动 tomcat 的 jdk 版本
环境: RHEL6.5. tomcat8.5.jdk1.8.0_181 修改 catalina.sh.setclasspath.sh 文件 进入目录 $ cd /data01/server/apach ...
- Shell - 简明Shell入门06 - 循环语句(Loop)
示例脚本及注释 #!/bin/bash # for循环 for filename in t1 t2 t3 do touch $filename.txt echo "Create new fi ...
- Python小白学习之路(二十六)—【if __name__ =='__main__':】【用状态标识操作】
规则一: 一个python文件中,只写一些可以运行的功能测试代码写在这句代码下面 if __name__ =='__main__': 在讲这边的时候,我不是很懂参考了一篇博客,地址如下:http:// ...
- redis安装(linux)
redis安装 1. 安装tcl # cd /usr/local # wget http://downloads.sourceforge.net/tcl/tcl8.6.1-src.tar.gz # t ...
- 线程中的同步辅助类Semaphore
同步辅助类 线程池 并发集合类 都是在线程同步的基础上增加了一些同步的东西,在线程同步的基础上更好的实现线程同步.实现的效率更高,更方便而已. 多线程并不是很难 需要你把代码写出来...然后分析运 ...
- apt 下载安装包
1) Try both without sudo, apt-get download will pass and apt-get -d install will fail (root required ...