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 相关文章推荐
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
JS判定是否原生方法
Jul 22 Javascript
Node.js与PHP、Python的字符处理性能对比
Jul 06 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
解决jQuery使用JSONP时产生的错误
Dec 02 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
Javascript var变量删除原理及实现
Aug 26 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运算符
2006/10/09 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
PHP的Yii框架的基本使用示例
2015/08/21 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
Ubuntu上安装yaf扩展的方法
2018/01/29 PHP
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
2016/07/12 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
解析js如何获取css样式
2016/12/11 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
node.js爬虫爬取拉勾网职位信息
2017/03/14 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
Python编写的com组件发生R6034错误的原因与解决办法
2013/04/01 Python
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
Python读取yaml文件的详细教程
2020/07/21 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
外贸销售员求职的自我评价
2013/11/23 职场文书
宣传口号大全
2014/06/16 职场文书
电子信息工程专业求职信
2014/06/28 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
音乐之声观后感
2015/06/04 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书