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 相关文章推荐
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
简单的JS轮播图代码
Jul 18 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
浅谈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导入导出excel实例
2013/10/25 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
2010/04/24 Javascript
JavaScript四种调用模式和this示例介绍
2014/01/02 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
Node.js巧妙实现Web应用代码热更新
2015/10/22 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
微信小程序访问node.js接口服务器搭建教程
2017/04/25 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
js+HTML5 canvas 实现简单的加载条(进度条)功能示例
2019/07/16 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
python输入多行字符串的方法总结
2019/07/02 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
linux面试题参考答案(3)
2012/09/13 面试题
应届生会计求职信
2013/11/11 职场文书
如何做好总经理助理
2013/11/12 职场文书
历史专业毕业生的自我鉴定
2013/11/15 职场文书
国庆节文艺活动方案
2014/02/03 职场文书
煤矿安全协议书
2014/08/20 职场文书
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL
Nginx跨域问题解析与解决
2022/08/05 Servers