微信小程序框架wepy.js父子组件双向通信
来源:互联网 发布:阿里云动易cms安装教程 编辑:程序博客网 时间:2024/05/30 04:25
props
father.wpy
<style lang="less"> .userinfo { display: flex; flex-direction: column; align-items: center; } .userinfo-avatar { width: 80rpx; height: 80rpx; border-radius: 50%; } .userinfo-nickname { color: #aaa; }</style><template> <view class="container"> //.sync表示子组件里更改了twoWayTitle, 父组件里的mynum也会跟着改变 , 双向通信 <child title="parentTitle999" :addProductImg="addProductImg" :twoWayTitle.sync='mynum' :items="item"></child> <view>{{ mynum }}</view> </view></template><script> import wepy from 'wepy' import child from '../components/child' export default class Index extends wepy.page { config = { navigationBarTitleText: 'test' } components = { child:child } mixins = [testMixin] data = { item:{ name:'tom', addr:'usa', age:22 }, mynum: 20, addProductImg:[ '../assets/product/aceeno.png', '../assets/product/boots.png', '../assets/product/boots2.png', '../assets/product/luca.png' ] } computed = { } methods = { } events = { } onLoad() { } }</script>
- child.wpy
<style type="less"> .group { }</style><template> <view class="group"> <view>props</view> <view>{{ title }}</view> <view>{{ twoWayTitle }}</view> <button @tap.stop="getProps">child-getProps</button> </view></template><script> import wepy from 'wepy' export default class child extends wepy.component { props = { title: String, syncTitle: { type: String, //限制类型为字符 default: 'null' //默认值为null }, twoWayTitle: { type: Number, //限制类型为数字 default: 50, //默认值为50 twoWay: true //true表示在子组件里更改了twoWayTitle值, 父组件也会同步更改 }, addProductImg:{ type:Object, //必须要指定类型 default:null } }; components = { } methods = { getProps(){ var num = this.twoWayTitle //获取props值 this.twoWayTitle = ++num } } }</script>
阅读全文
0 0
- 微信小程序框架wepy.js父子组件双向通信
- 微信小程序框架wepy.js组件传值的bug
- 微信小程序框架wepy之动态控制类名
- vue.js学习笔记(六)--利用v-model实现父子组件间的双向通信
- 小程序组件化框架 WePY 在性能调优上做出的探究
- wepy框架
- wepy微信小程序框架和wept第三方小程序开发工具
- 利用v-model实现父子组件间的双向通信
- 微信小程序显示 html wepy + wxParse
- 微信小程序 wepy wx.previewImage 封装
- 微信小程序 wx.request wepy 简单封装
- 小程序开发 wepy框架 类vue的开发方式
- vue实现父子双向通信
- wepy.js开发记录
- Vue.js 父子组件通讯
- 父子组件通信vue.js
- 微信小程序之图书管理系统(wepy版)
- 前端框架vue.js系列(7):父子组件参数变化传递规范
- 分布式 数据访问层
- 转换json关联集合运行时出现懒加载问题解决方案
- cssday1homework
- 一个简单的构造接口返回协议的工具类
- Vmware vSphere Client克隆虚拟机
- 微信小程序框架wepy.js父子组件双向通信
- std mutex
- Remove Duplicates from Sorted Array
- VB学习整理2 form 格式化
- C++进阶—>C++内存管理
- 30+关于如何成为更好Android开发者的短小而专业的建议
- dubbo 的构建
- PhpStorm2017版激活方法、汉化方法以及界面配置
- Sqoop的安装