Vue 组件&组件之间的通信之单向数据流

单向数据流：父组件值的更新，会影响到子组件，反之则不行；

修改子组件的值：

局部数据：在子组件中定义新的数据，将父组件传过来的值赋值给新定义的数据，之后操作这个新数据；

如果对数据进行简单的操作，可以使用计算属性；

Vue 组件&组件之间的通信之单向数据流

由效果图可知，父组件值的更新，会影响到子组件，而子组件值的更新时，控制台会报错

此时代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title> 单向数据流</title>
 6         <script type="text/javascript" src="../js/vue.js" ></script>
 7     </head>
 8     <body>
 9         <div>
10             <father-component ></father-component>
11             </div>
12     </body>
13     <template id="father-template">
14         <div>
15         <h2> 父组件</h2>
16         myData:<span>{{name}}</span><br />
17         
18         <input type="text"  v-model="name"/>
19         <hr />
20       <child-component :name="name" ></child-component>    
21         </div>
22     </template>
23     <template id="child-template">
24         <div>
25             <p> 子组件</p>
26             fatherData:<span >{{name}}</span>
27             <input type="text"  v-model="name"/>
28             
29         </div>
30 </template>
31     <script>
32         
33         
34         new Vue({
35             
36             data:{
37         
38            },
39             components:{
40                     "father-component":{
41                         data(){
42                             return{
43                                 
44                                 name:'perfect',
45                                 
46                             }
47                         },
48                         props:['msg'],
49                         template:'#father-template',
50                         
51                         components:{
52                             "child-component":{
53                                 
54                                 template:'#child-template',
55                             props:['name']
56                             }
57                         },
58                         
59                         
60                         
61                     }
62                 }
63                 
64             
65             
66         }).$mount('div');
67     </script>
68 </html>

父组件值的更新，会影响到子组件，而子组件值的更新时，控制台会报错