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 相关文章推荐
基于逻辑运算的简单权限系统(实现) JS 版
Mar 24 Javascript
js获取height和width的方法说明
Jan 06 Javascript
JSON+HTML实现国家省市联动选择效果
May 18 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
Node.js中常规的文件操作总结
Oct 13 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
JS模拟实现京东快递单号查询
Nov 30 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
基于HTTP长连接的"服务器推"技术的php 简易聊天室
2009/10/31 PHP
Linux下安装PHP MSSQL扩展教程
2014/10/24 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
利用node.js如何创建子进程详解
2017/12/09 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
vue实现循环切换动画
2018/10/17 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
详解Python验证码识别
2016/01/25 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
15行Python代码带你轻松理解令牌桶算法
2018/03/21 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
django ORM之values和annotate使用详解
2020/05/19 Python
电子商务专业学生的学习自我评价
2013/10/27 职场文书
事业单位接收函
2014/01/10 职场文书
中学生打架检讨书
2014/02/10 职场文书
讲解员培训方案
2014/05/04 职场文书
工作建议书范文
2014/05/13 职场文书
兵马俑的导游词
2015/02/02 职场文书
农村党员干部承诺书
2015/05/04 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
python 调用js的四种方式
2021/04/11 Python
JS前端使用Canvas快速实现手势解锁特效
2022/09/23 Javascript