（1）组件通信

    父组件向子组件传递数据。这个正向传递数据的过程就是通过props来实现的。

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

    两者区别：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。

 

 

 

 

 

 

 

.

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄