(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':100 } }); </script>
.