vue2.0 子组件改变props值,并向父组件传值的方法


Posted in Javascript onMarch 01, 2018

为什么我们会有修改 prop 中数据的冲动呢?通常是这两种原因:

prop 作为初始值传入后,子组件想把它当作局部数据来用;

prop 作为初始值传入,由子组件处理成其它数据输出。

对这两种原因,正确的应对方式是:

定义一个局部变量,并用 prop 的值初始化它:

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

定义一个计算属性,处理 prop 的值并返回。

props: ['size'],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}

注意在 JavaScript 中对象和数组是引用类型,指向同一个内存空间,如果 prop

是一个对象或数组,在子组件内部改变它会影响父组件的状态。

我们知道,父组件是使用 props 传递数据给子组件,但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了。 https://cn.vuejs.org/v2/guide/components.html#自定义事件

在父组件中定义两个变量,动态绑定到子组件中

vue2.0 子组件改变props值,并向父组件传值的方法

vue2.0 子组件改变props值,并向父组件传值的方法

子组件:

vue2.0 子组件改变props值,并向父组件传值的方法

vue2.0 子组件改变props值,并向父组件传值的方法

vue2.0 子组件改变props值,并向父组件传值的方法

父组件:定义两个方法,并绑定到子组件自定义事件上

vue2.0 子组件改变props值,并向父组件传值的方法

vue2.0 子组件改变props值,并向父组件传值的方法

以上这篇vue2.0 子组件改变props值,并向父组件传值的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
RequireJS简易绘图程序开发
Oct 28 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
JS实现页面打印功能
Mar 16 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
Apr 16 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 #Javascript
vue 虚拟dom的patch源码分析
Mar 01 #Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 #Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 #Javascript
React Native 图片查看组件的方法
Mar 01 #Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 #Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 #Javascript
You might like
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
JavaScript获取网页表单action属性的方法
2015/04/02 Javascript
JavaScript中for循环的使用详解
2015/06/03 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
vuex的简单使用教程
2018/02/02 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
[02:15]2015国际邀请赛选手档案IG.Ferrari 430
2015/07/30 DOTA
Python简单读取json文件功能示例
2017/11/30 Python
使用urllib库的urlretrieve()方法下载网络文件到本地的方法
2018/12/19 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
django迁移数据库错误问题解决
2019/07/29 Python
python之列表推导式的用法
2019/11/29 Python
浅析Python3 pip换源问题
2020/01/06 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
自我评价怎么写好呢?
2013/12/05 职场文书
会计系个人求职信范文分享
2013/12/20 职场文书
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
预备党员思想汇报
2014/01/08 职场文书
医学生个人求职信范文
2014/02/07 职场文书
老师的检讨书
2014/02/23 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
终止劳动合同通知书
2015/04/16 职场文书
2016大一新生军训感言
2015/12/08 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
MySQL 四种连接和多表查询详解
2021/07/16 MySQL
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL