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 ...
随机推荐
- dev Gridcontrol控件属性部分
XtraGrid的关键类就是:GridControl和GridView.GridControl本身不显示数据,数据都是显示在GridView/CardView/XXXXView中.GridContro ...
- c#文件图片操作
系统特殊目录路径 //取得特殊文件夹的绝对路径 //桌面 Environment.GetFolderPath(Environment.SpecialFolder.Desktop); //收藏夹 Env ...
- Asp.NetCore依赖注入和管道方式的异常处理及日志记录
前言 在业务系统,异常处理是所有开发人员必须面对的问题,在一定程度上,异常处理的能力反映出开发者对业务的驾驭水平:本章将着重介绍如何在 WebApi 程序中对异常进行捕获,然后利用 Nlog ...
- 初步认识Swiper_前端交互控制神器_滚动3D切换等特效简单制作
前言: 本人在项目的工作中负责研发,页面及交互基本都是交给前端去做的.以前前端写的东西大概都知道,都是一些JS,CSS和HTML等的一些基本控制,都懂!但是今天前端突然做了一个具有特殊效果的DOM:页 ...
- Odoo 中使用 celery 实现高性能异步任务队列
详见:http://www.oejia.net/blog/2018/07/09/odoo_task_queue.html 概述 在 odoo 中可以用自带的cron实现异步任务,这个cron基于多线程 ...
- zoomeye搜索+用selenium实现对佳能打印机的爬虫
本文仅用于学习参考.要遵纪守法哦! 目的:找出一台佳能打印机,得到它的日志文件,并利用其远程打印. 1.先用zoomeye找一个打印机出来,搜索语句:printer +country:"CN ...
- 简单的纯js三级联动
参考这个 日尼禾尔 二级联动 写了三级联动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
- RHEL7/CentOS7 安装Zabbix
1.添加 Zabbix 软件仓库 rpm -ivh http://repo.zabbix.com/zabbix/4.0/rhel/7/x86_64/zabbix-release-4.0-1.el7.n ...
- Linux、CentOS7下报错-bash: TMOUT: readonly variable怎么办？
一.Linux操作系统版本 二.背景:在项目中当我们配置好JDK环境变量.Tomcat环境变量,通过source /etc/profile使环境变量生效时,发现会报错,如图 三.解决 个人尚不知出现原 ...
- java有关 String char 常见问题 编辑中
1 输入输出有关 Scanner 的next()方法 返回值是String 所以尝试获得char时 应该用input.next().charAt[0] 2 空值 String 中null是指 对象引用 ...