vue.js实战——props单向数据流
Vue2.x通过props传递数据是单向的了，也就是父组件数据变化时会传递给子组件，但是反过来不行。
业务中会经常遇到两种需要改变prop的情况，
一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件data内再声明一个数据，引用父组件的prop，示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<my-component :init-count="1"></my-component>
</div>
<script>
Vue.component('my-component',{
props:['init-count'],
template:'<div>{{count}}</div>',
data:function(){
return {
count:this.initCount
}
}
})
new Vue({
el:'#app',
})
</script>
</body>
</html>
组件中声明了数据count，它在组件初始化时会获取来自父组件的initCount，之后就与之无关了，只用维护count，这样就可以避免直接操作initCount。
另一种情况就是prop作为需要被转变的原始值传入。这种情况用计算属性就可以了，示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<mynew-component :width="100"></mynew-component>
</div>
<script>
Vue.component('mynew-component',{
props:['width'],
template:'<div :style="style">组件内容</div>',
computed:{
style:function(){
return {
width:this.width+'px',
background:'lightgray',
textAlign:'center'
}
}
}
})
new Vue({
el:'#app',
})
</script>
</body>
</html>
注意：
在JavaScript中对象和数组是引用类型，指向同一个内存空间，所以props是对象和数组时，在子组件内改变是会影响父组件的。
//如此解决引用传递
1：var newObject = jQuery.extend(true, {}, oldObject);
2：var obj={}; obj=JSON.parse(JSON.stringify(oldObject)); vue.js实战——props单向数据流的更多相关文章
- vue.js实战——props数据验证（自定义构造器检测）
Vue.component('my-component',{ props:{ //必须是数字类型 propA:Number, //必须是字符串或数字类型 propB:[String,Number], ...
- vue.js 实战 todo list
vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...
- vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...
- 【Vue.js实战案例】- Vue.js递归组件实现组织架构树和选人功能
大家好!先上图看看本次案例的整体效果. 浪奔,浪流,万里涛涛江水永不休.如果在jq时代来实这个功能简直有些噩梦了,但是自从前端思想发展到现在的以MVVM为主流的大背景下,来实现一个这样繁杂的功能简直不 ...
- 分享Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站
这是个什么的项目? 使用 Node.js + Koa2 + MySQL + Vue.js 实战开发一套完整个人博客项目网站. 博客线上地址:www.boblog.com Github地址:https: ...
- Vue props 单向数据流
1.props通信 注意:DOM模板的驼峰命名props要转为短横分割命名. <!DOCTYPE html> <html lang="zh"> <he ...
- Vue.js 实战总结
最近在某个项目中用到了Vue.js,从上手做开发到项目发布,一步步踩了不少坑.本文试图总结过去一个多月使用Vue.js中的一些经验,也算是一点心得体会吧,拿出来与大家分享,欢迎多多交流. Vue.js ...
- vue.js实战(文摘)
---------------第1篇 基础篇 第1章 初始vue.js 第2章 数据绑定和第一个vue应用 第3章 计算属性 第4章 v-bind及class与style绑定 第5章 内置命令 第6章 ...
- Vue.js实战学习笔记（中）
1.递归组件给组件设置name属性,组件就可以在它的模板内调用自己,但必须给一个条件来限制递归数量.<div id="app"> <child-component ...
随机推荐
- debian The type initializer for 'System.Drawing.KnownColors' threw an exception
Change the "System.Drawing" reference of "CoreCompat.System.Drawing"if you thro ...
- Shell从入门到精通进阶之四:流程控制
流程控制是改变程序运行顺序的指令. 4.1 if语句 4.1.1 单分支 if 条件表达式; then 命令 fi 示例: #!/bin/bash N=10 if [ $N -gt 5 ]; then ...
- 搞懂MySQL InnoDB事务ACID实现原理
前言 说到数据库事务,想到的就是要么都做修改,要么都不做.或者是ACID的概念.其实事务的本质就是锁和并发和重做日志的结合体.那么,这一篇主要讲一下InnoDB中的事务到底是如何实现ACID的. 原子 ...
- Java设计模式系列-装饰器模式
原创文章,转载请标注出处:<Java设计模式系列-装饰器模式> 一.概述 装饰器模式作用是针对目标方法进行增强,提供新的功能或者额外的功能. 不同于适配器模式和桥接模式,装饰器模式涉及的是 ...
- #6 判断一个数是否为2的n次方
「ALBB面试题」 [题目] 如何判断一个数是否为2的n次方 [题目分析] 看到这种题,相信大家第一反应就是循环除2,这样做肯定是可以得出结果的:但是这种做法无疑大大增加了计算机的运行时间,一个非常大 ...
- 几分钟搞定redis存储session共享——设计实现
前面我们写过C#在redis中存储常用的5种数据类型demo,没看过的可以点击电梯直达:https://www.cnblogs.com/xiongze520/p/10267804.html 我们上一篇 ...
- 简述在ADO中使用接口的抽象数据提供程序以及ADO.NET数据提供程序工厂模型
如何在ADO中使用接口的抽象数据提供程序 在cofig中 appSettings下,配置数据连接类型 <appSettings> <!--这个键值映射到枚举值中的某个值--> ...
- python 面试题
1.os.path与sys.path的区别是什么? os.path 主要用于系统文件路径的操作 sys.path 主要是python解释器的系统环境参数的操作 2.re模块中match和search方 ...
- C#实现多级子目录Zip压缩解压实例
参考 https://blog.csdn.net/lki_suidongdong/article/details/20942977 重点: 实现多级子目录的压缩,类似winrar,可以选择 ...
- 亿级流量场景下，大型架构设计实现【全文检索高级搜索---ElasticSearch篇】-- 中
1.Elasticsearch的基础分布式架构: 1.Elasticsearch对复杂分布式机制的透明隐藏特性2.Elasticsearch的垂直扩容与水平扩容3.增减或减少节点时的数据rebalan ...