vue之props传值与单向数据流
（1）组件通信
父组件向子组件传递数据。这个正向传递数据的过程就是通过props来实现的。
两者区别：props中声明的数据与组件data函数return返回的数据的主要区别就是props来自父级，而data中是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template、计算属性computed、方法methods中使用。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>demo1</title>
<script type="text/javascript" src="vue-2.6.9.min.js"></script>
</head>
<body>
<div id="demo">
<textarea v-model="message" v-bind:placeholder="placeholder"></textarea>
<demo-component v-bind:message="message"></demo-component>
</div>
<script type="text/javascript">
Vue.component('demo-component',{
props:['message'],
template:`
<div class="demo-area">
{{message}}
</div>
`
});
var demo = new Vue({
el:'#demo',
data:{
message:'来自父级的数据',
placeholder:'请输入'
}
})
</script>
</body>
</html>
（2）单向数据流
业务中会经常遇到两种需要改变props的情况，一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件data中再声明一个数据，引用父组件的prop
<div id="demo">
<demo-component v-bind:initcount="initcount"></demo-component>
</div>
<script type="text/javascript">
Vue.component('demo-component',{
props:['initcount'],
template:`
<div class="demo-area">
{{count}}
</div>
`,
data:function(){
return {
count:this.initcount
}
}
});
var demo = new Vue({
el:'#demo',
data:{
'initcount':'1'
}
});
</script>
组件里声明了数据count，它在组件初始化时会获取来自父级组件的initcount，之后便与之无关，只用维护count，这样就可以避免直接操作initcount。
（3）另一种情况就是prop作为需要被转变的原始值传入，这种情况用计算属性即可。
<div id="demo">
<demo-component v-bind:width="width"></demo-component>
</div>
<script type="text/javascript">
Vue.component('demo-component',{
props:['width'],
template:`
<div class="demo-area" v-bind:style="style">
组件内容
</div>
`,
computed:{
style(){
return {width:this.width+'px'};
}
}
});
var demo = new Vue({
el:'#demo',
data:{
'width':
}
});
</script>
.
vue之props传值与单向数据流的更多相关文章
- vue第十八单元(单向数据流 vuex状态管理)
第十八单元(单向数据流 vuex状态管理) #课程目标 1.理解什么是数据管理模式 2.什么是vuex 3.什么时候使用vuex 4.vuex安装及工作原理 5.vuex语法 #知识点 1.首先来看下 ...
- Vue props 单向数据流
1.props通信 注意:DOM模板的驼峰命名props要转为短横分割命名. <!DOCTYPE html> <html lang="zh"> <he ...
- Vue 父子组件传值 props
1.Vue 的渲染周期: vue 如何实现响应式追踪. 父子组件通信有很多方式,今天单独聊下props 的方式.我们通过查找官方文档很容发现,props传值有静态和动态两种传值方式. 当然props ...
- Vue 组件&组件之间的通信 之 单向数据流
单向数据流:父组件值的更新,会影响到子组件,反之则不行: 修改子组件的值: 局部数据:在子组件中定义新的数据,将父组件传过来的值赋值给新定义的数据,之后操作这个新数据: 如果对数据进行简单的操作,可以 ...
- vue第九单元(非父子通信 events 单向数据流)
第九单元(非父子通信 events 单向数据流) #课程目标 了解非父子组件通信的原理,熟练实现非父子组件间的通信(重点) 了解单向数据流的含义,并且明白单向数据流的好处 #知识点 #1.非父子组件间 ...
- vue 单向数据流 & 双向绑定
在react中是单向数据绑定,而在vue中的特色是双向数据绑定.但是其实就我个人的理解是: 其实无论是vue还是react其实还是提倡单向数据流去管理状态,这一点在vuex和redux状态管理器上体现 ...
- 关于Vue中props的详解
看一下官方文档: 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.父组件的数据需要通过 prop 才能下发到子组件中. 也就是props是子组件访问父组件数 ...
- vue-父子组件之传值和单项数据流问题
前言 我们知道 vue 中父子组件的核心概念是单项数据流问题,props 是单项传递的.那究竟什么是单项数据流问题,这篇文章来总结一下关于这个知识点的学习笔记. 正文 1.父组件传值给子组件 < ...
- React 精要面试题讲解(一) 单向数据流
react 单向数据流概念 'react框架是怎样的数据流向?'||'react单向数据流是怎样的概念 ?' 解答这个问题之前,我们首先得知道,js框架是个怎样的概念. 框架:具备一定**编程思想** ...
随机推荐
- Rust语言——无虚拟机、无垃圾收集器、无运行时、无空指针/野指针/内存越界/缓冲区溢出/段错误、无数据竞争
2006年,编程语言工程师Graydon Hoare利用业余时间启动了Rust语言项目.该项目充分借鉴了C/C++/Java/Python等语言的经验,试图在保持良好性能的同时,克服以往编程语言所存在 ...
- Linux设备模型 (4)
<Linux设备模型 (2)>和<Linux设备模型 (3)>主要通过一些简单的实作介绍了kobject.kset.kobj_type.attribute等数据结构的用法,但这 ...
- RocketMQ消费者实践
最近工作中用到了RocketMQ,现记录下,如何正确实现消费~ 消费者需要注意的问题 防止重复消费 如何快速消费 消费失败如何处理 Consumer具体实现 防止重复消费 重复消费会造成数据不一致等问 ...
- maven配置文件注意事项
1:安装完成后在C:\Users\Administrator\.m2有一个文件settings.xml需要修改一下配置 2:设置maven从网上下载的jar包.(时间长会很大).我设置它保存我的电脑位 ...
- 洛谷 P1081 开车旅行【双向链表+倍增】
倍增数组的20和N写反了反复WAWAWA-- 注意到a和b在每个点上出发都会到一个指定的点,所以这样构成了两棵以n点为根的树 假设我们建出了这两棵树,对于第一问就可以枚举起点然后倍增的找出ab路径长度 ...
- bzoj 1913: [Apio2010]signaling 信号覆盖【旋转卡壳(?)】
参考:https://blog.csdn.net/qpswwww/article/details/45334033 讲的很清楚 做法比较像旋转卡壳但是具体是不是我也不清楚.. 首先知道只要求出每种方案 ...
- _bzoj1500 [NOI2005]维修数列【真·Splay】
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1500 注意MAX-SUM的时候,不可以是空串. #include <cstdio> ...
- 最短路(Dijkstra) HDOJ 4318 Power transmission
题目传送门 题意:起点s到终点t送电,中途会有损耗,问最小损耗是多少 分析:可以转换为单源最短路问题,用优先队列的Dijkstra版本,d[]表示从s出发到当前点的最小损耗,用res保存剩下的电量.当 ...
- 水题 Codeforces Round #306 (Div. 2) A. Two Substrings
题目传送门 /* 水题:遍历一边先找AB,再BA,再遍历一边先找BA,再AB,两种情况满足一种就YES */ #include <cstdio> #include <iostream ...
- 贪心 Codeforces Round #309 (Div. 2) B. Ohana Cleans Up
题目传送门 /* 题意:某几列的数字翻转,使得某些行全为1,求出最多能有几行 想了好久都没有思路,看了代码才知道不用蠢办法,匹配初始相同的行最多能有几对就好了,不必翻转 */ #include < ...