（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>
.