父子组件传值

静态传值

静态传值为父组件向子组件传递常量数据,因此只能传递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. C# 开源仪表盘库—Agauge App

    1.简介 有个叫A.J.Bauer 的大神在System.Windows.Forms.Control类的基础上建立了一个显示各种仪表盘的类.                   英文版简介:C# Tu ...

  2. 新品成熟EMR源码电子病历系统软件NET网络版CS可用带数据库全文档

    查看电子病历系统演示 医院医疗信息管理系统,EMR电子病历系统,功能模块如下所示: 1.住院医生站 2.住院护士站 3.病案浏览工作站 4.质量控制工作站 5.系统维护工作站  本店出售系统全套源码, ...

  3. 背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid

    [源码下载] 背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid 作者:webabc ...

  4. 剑指offer编程题Java实现——面试题7相关题用两个队列实现一个栈

    剑指offer面试题7相关题目:用两个队列实现一个栈 解题思路:根据栈的先入后出和队列的先入先出的特点1.在push的时候,把元素向非空的队列内添加2.在pop的时候,把不为空的队列中的size()- ...

  5. Flask系列05--Flask的配置config

    一.flask配置 示例说明, 就是使用config进行配置 from flask import Flask ​ app = Flask(__name__) # type:Flask app.conf ...

  6. 【文文殿下】【洛谷】分治NTT模板

    题解 可以计算每一项对后面几项的贡献,然后考虑后面每一项,发现这是一个卷积,直接暴力NTT就行了,发现它是一个有后效性的,我们选择使用CDQ分治. Tips:不能像通常CDQ分治一样直接 每次递归两边 ...

  7. kali linux 安装sublime text3完全教程

    点击进入官网 下载页面 将鼠标放在64 bit(64位系统)上右击复制链接 打开终端: #wget 路径(粘贴刚复制的) #tar -xvvf 刚刚下载的文件文件名(解压) #mv 解压出来的文件名  ...

  8. 重识 PWA 进阶到 workbox3

    看到PWA,似曾相识,但又感觉很模糊,于是乎,又重新翻阅文档,学习了一遍,顺便把相关知识学习了一下,比如service worker,workbox3. PWA 概念: 全称:Progressive ...

  9. win10+Theano+GPU

    1. cuda + cudnn 首先还是要先安装GPU库,具体和caffe安装中一样. 2. Theano 为防止下载速度慢,配置清华镜像 conda config --add channels ht ...

  10. js基础知识--变量类型和变量计算

    提问: JS中使用typeof能得到的哪些类型 何时使用===何时使用== JS中有哪些内置函数 JS变量按照存储方式区分为哪些类型,并描述其特点 如何理解JSON 涉及知识点:(1)变量类型 值类型 ...