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框架是个怎样的概念. 框架:具备一定**编程思想** ...
随机推荐
- EL使用技巧
☞控制页面元素显示与否 实现效果: 实现方案: ...... <div style="display:${empty param.hideTitle ? 'auto' : 'none' ...
- rxjava 视频
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha Rxjava-基础篇视频教程-Rxjava框架的使用-麦子学院 它的自我介绍,我们可以理 ...
- [HDU1542]Atlantis(扫描线+线段树)
Atlantis Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- JVM命令-java服务器故障排查
一.top(Linux命令) 执行top命令: (查看进程15477的详细情况,下文用到) 系统信息(前五行): 第1行:Top 任务队列信息(系统运行状态及平均负载),与uptime命令结果相 ...
- Atom | 编辑器Atom的使用小结
文章目录 windows环境下 Atom工具使用apm Packages 推荐阅读 常用快捷键 windows环境下 Atom工具使用apm 在 Atom 的安装路径下找到 apm ,复制路径: 将该 ...
- Maven项目管理:SpringMVC+Mybatis+Velocity整合笔记
Maven创建项目 略…具体过程可参考用Maven创建第一个web项目 配置Spring MVC 导入Spring MVC 需要的包在pom.xml 文件下加入: 123456789101112 &l ...
- cas如何去掉HTTPS认证？
说明:默认情况下HTTP也是可以访问CAS SERVER的,但认证,登陆,退出等操作均没有任何的效果.所以必须作出下面的修改 1.进入WEB-INF\spring-configuration目录 打 ...
- iOS：文本视图控件UITextView的详细使用
文本视图控件:UITextView 介绍:它是一个文本域的编辑视图,可以在该区域上进行编辑(包括删除.剪贴.复制.修改等),它与文本框UITextField的不同之处是:当它里面的每一行内容超出时,可 ...
- mysql重置密码和mysql error 1044(42000)错误
#mysql错误:(密码不正确,需要重置密码) ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passwor ...
- piwik网站访问统计系统
一.Piwik介绍 Piwik是一套基于PHP+MySQL技术构建的开源网站访问统计系统.Piwik可以给你详细的统计信息,比如网页浏览人数,访问最多的页面,搜索引擎关键词等流量分析功能.此外,它还采 ...