Vue props 单向数据流
1、props通信
注意：DOM模板的驼峰命名props要转为短横分割命名。
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<my-component message='来自父组件的数据' warning-text="提示信息"></my-component> </div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
Vue.component('my-component', {
template: '<div>{{warningText}}：{{message}}</div>',
props: ['message', 'warningText']
})
new Vue({
el: "#app"
})
</script>
</body> </html>
传递动态数据（v-bind）：
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<input type="text" v-model="parentMessage" />
<my-component :message='parentMessage'></my-component> </div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
Vue.component('my-component', {
template: '<div>{{message}}</div>',
props: ['message']
})
new Vue({
el: "#app",
data: {
parentMessage: ''
}
})
</script>
</body> </html>
2、单向数据流
（1）子组件保存父组件传递过来的值，在子组件自己的作用域下修改和使用。
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app"> <my-component :init-count='1'></my-component> </div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
Vue.component('my-component', {
template: '<div>{{initCount}}</div>',
props: ['initCount'],
data: function() {
return this.initCount
}
})
new Vue({
el: "#app"
})
</script>
</body> </html>
（2）使用计算属性
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app"> <my-component :width='100'></my-component> </div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
Vue.component('my-component', {
template: '<div :style="style">组件内容</div>',
props: ['width'],
computed: {
style: function() {
return {
width: this.width + 'px'
}
}
}
})
new Vue({
el: "#app"
})
</script>
</body> </html>
Vue props 单向数据流的更多相关文章
- vue.js实战——props单向数据流
Vue2.x通过props传递数据是单向的了,也就是父组件数据变化时会传递给子组件,但是反过来不行. 业务中会经常遇到两种需要改变prop的情况, 一种是父组件传递初始值进来,子组件将它作为初始值保存 ...
- vue prop单向数据流
Prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是反过来不会.这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解. 另外,每次父组件更新时,子组件的所有 pro ...
- vue的单向数据流
父级向子组件传递的值, 子组件不能直接修改这个穿过来的值,否则会曝出警告,这就是单项数据流. 如果是引用值,传递的是引用值得地址,而不是值本身,也就是说,子组件里修改这个传过来的值,通常的做法是放到它 ...
- vue之props传值与单向数据流
(1)组件通信 父组件向子组件传递数据.这个正向传递数据的过程就是通过props来实现的. 两者区别:props中声明的数据与组件data函数return返回的数据的主要区别就是props来自父级,而 ...
- Vue 组件&组件之间的通信 之 单向数据流
单向数据流:父组件值的更新,会影响到子组件,反之则不行: 修改子组件的值: 局部数据:在子组件中定义新的数据,将父组件传过来的值赋值给新定义的数据,之后操作这个新数据: 如果对数据进行简单的操作,可以 ...
- vue第九单元(非父子通信 events 单向数据流)
第九单元(非父子通信 events 单向数据流) #课程目标 了解非父子组件通信的原理,熟练实现非父子组件间的通信(重点) 了解单向数据流的含义,并且明白单向数据流的好处 #知识点 #1.非父子组件间 ...
- vue 单向数据流 & 双向绑定
在react中是单向数据绑定,而在vue中的特色是双向数据绑定.但是其实就我个人的理解是: 其实无论是vue还是react其实还是提倡单向数据流去管理状态,这一点在vuex和redux状态管理器上体现 ...
- vue第十八单元(单向数据流 vuex状态管理)
第十八单元(单向数据流 vuex状态管理) #课程目标 1.理解什么是数据管理模式 2.什么是vuex 3.什么时候使用vuex 4.vuex安装及工作原理 5.vuex语法 #知识点 1.首先来看下 ...
- React 精要面试题讲解(一) 单向数据流
react 单向数据流概念 'react框架是怎样的数据流向?'||'react单向数据流是怎样的概念 ?' 解答这个问题之前,我们首先得知道,js框架是个怎样的概念. 框架:具备一定**编程思想** ...
随机推荐
- NOIP2018 提高组题解
Day1 T1 据说是原题积木大赛,但是考场上蠢了,只会写数据结构,于是写了一个线段树\(+\)堆\(+\)贪心,先选出最小的,然后区间修改,然后把左右两端区间的最小值丢进堆里,不停从堆中去最小值更新 ...
- python3实践-从网站获取数据(Carbon Market Data-BJ) （pandas，bs4）
自己边看边实践一些简单的实际应用,下面的程序是从某个网站上获取需要的数据. 在编写的过程中,通过学习陆续了解到一些方法,发现Python真的是很便捷. 尤其是用pandas获取网页中的表格数据,真的是 ...
- [USACO 2017 Jan Gold] Tutorial
Link: 传送门 A: 按值大小插入后用树状数组统计两边个数 #include <bits/stdc++.h> using namespace std; #define X first ...
- 【动态规划】POJ3616-Milking Time
[题目大意] 奶牛Bessie在0~N时间段产奶.农夫约翰有M个时间段可以挤奶,时间段[a,b]Bessie能挤到的牛奶量v.奶牛产奶后需要休息R小时才能继续下一次产奶,求Bessie最大的挤奶量. ...
- Team Queue(POJ 2259)
题意:有若干个团体,每个团体有若干个元素,他们按次序来排队,如果队列中已经有同一团体的元素在,则可以插队到它后面,模拟这个过程 思路:用map存下元素与团体的关系,并开2个队列,一个存整体队伍的排列( ...
- linux禁ping与限制ip登录
以root进入linux系统,然后编辑文件icmp_echo_ignore_allvi /proc/sys/net/ipv4/icmp_echo_ignore_all将其值改为1后为禁止PING将其值 ...
- Java 8：不要再用循环了 Stream替代for循环
原文:http://www.importnew.com/14841.html 在这篇文章里,我们将会去了解传统循环的一些替代方案.在Java 8的新功能特性中,最棒的特性就是允许我们去表达我们想要完成 ...
- DELPHI开发LINUX桌面程序
DELPHI开发LINUX桌面程序 DELPHI官方目前为止尚不能开发LINUX桌面程序. 但三方控件FmxLinux(商业控件)是可以的.网上有破解版本.
- jrat
JRat the Java Runtime Analysis Toolkit What is it? The Java Runtime Analysis Toolkit is a low overhe ...
- meteor学习-- #一 安装meteor快速使用
下载安装 curl https://install.meteor.com/ | sh meteor会自动下载mongodb和其他需要依赖的库,不需要手动安装. 如果是Windows 的用户,请使用 m ...