【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 ...
随机推荐
- C# 开源仪表盘库—Agauge App
1.简介 有个叫A.J.Bauer 的大神在System.Windows.Forms.Control类的基础上建立了一个显示各种仪表盘的类. 英文版简介:C# Tu ...
- 新品成熟EMR源码电子病历系统软件NET网络版CS可用带数据库全文档
查看电子病历系统演示 医院医疗信息管理系统,EMR电子病历系统,功能模块如下所示: 1.住院医生站 2.住院护士站 3.病案浏览工作站 4.质量控制工作站 5.系统维护工作站 本店出售系统全套源码, ...
- 背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid
[源码下载] 背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid 作者:webabc ...
- 剑指offer编程题Java实现——面试题7相关题用两个队列实现一个栈
剑指offer面试题7相关题目:用两个队列实现一个栈 解题思路:根据栈的先入后出和队列的先入先出的特点1.在push的时候,把元素向非空的队列内添加2.在pop的时候,把不为空的队列中的size()- ...
- Flask系列05--Flask的配置config
一.flask配置 示例说明, 就是使用config进行配置 from flask import Flask app = Flask(__name__) # type:Flask app.conf ...
- 【文文殿下】【洛谷】分治NTT模板
题解 可以计算每一项对后面几项的贡献,然后考虑后面每一项,发现这是一个卷积,直接暴力NTT就行了,发现它是一个有后效性的,我们选择使用CDQ分治. Tips:不能像通常CDQ分治一样直接 每次递归两边 ...
- kali linux 安装sublime text3完全教程
点击进入官网 下载页面 将鼠标放在64 bit(64位系统)上右击复制链接 打开终端: #wget 路径(粘贴刚复制的) #tar -xvvf 刚刚下载的文件文件名(解压) #mv 解压出来的文件名 ...
- 重识 PWA 进阶到 workbox3
看到PWA,似曾相识,但又感觉很模糊,于是乎,又重新翻阅文档,学习了一遍,顺便把相关知识学习了一下,比如service worker,workbox3. PWA 概念: 全称:Progressive ...
- win10+Theano+GPU
1. cuda + cudnn 首先还是要先安装GPU库,具体和caffe安装中一样. 2. Theano 为防止下载速度慢,配置清华镜像 conda config --add channels ht ...
- js基础知识--变量类型和变量计算
提问: JS中使用typeof能得到的哪些类型 何时使用===何时使用== JS中有哪些内置函数 JS变量按照存储方式区分为哪些类型,并描述其特点 如何理解JSON 涉及知识点:(1)变量类型 值类型 ...