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格式化数字的函数代码
Nov 30 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
以WordPress为例讲解jQuery美化页面Title的方法
May 23 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
原生js实现分页效果
Sep 23 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图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
Jquery数独游戏解析(一)-页面布局
2010/11/05 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
深入理解$.each和$(selector).each
2016/05/15 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
Bootstrap表单简单实现代码
2017/03/06 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
python多进程操作实例
2014/11/21 Python
Django框架下在URLconf中指定视图缓存的方法
2015/07/23 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
python中的随机函数random的用法示例
2018/01/27 Python
Python输出由1,2,3,4组成的互不相同且无重复的三位数
2018/02/01 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
python爱心表白 每天都是浪漫七夕!
2018/08/18 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
中文专业自荐书
2014/06/29 职场文书
爱心捐书活动总结
2014/07/05 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
在CSS中映射鼠标位置并实现通过鼠标移动控制页面元素效果(实例代码)
2021/04/22 HTML / CSS
node快速搭建后台的实现步骤
2022/02/18 NodeJs