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 相关文章推荐
IE8 引入跨站数据获取功能说明
Jul 22 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
通用无限极下拉菜单的实现代码
May 31 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
Node调用Java的示例代码
Sep 20 Javascript
详解element上传组件before-remove钩子问题解决
Apr 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 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
php实现的简单检验登陆类
2015/06/18 PHP
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
JS或jQuery获取ASP.NET服务器控件ID的方法
2015/06/08 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
Js和VUE实现跑马灯效果
2020/05/25 Javascript
vue实现购物车列表
2020/06/30 Javascript
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
python+tifffile之tiff文件读写方式
2020/01/13 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
送货司机岗位职责
2013/12/11 职场文书
晚宴邀请函范文
2014/01/15 职场文书
九年级体育教学反思
2014/01/23 职场文书
cf收人广告词大全
2014/03/14 职场文书
2014年师德承诺书
2014/05/23 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
Nginx配置文件详解以及优化建议指南
2021/09/15 Servers
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers