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