vue 父子组件传值

父组件通过属性向子组件传值

单向数据流，父组件可以向子组件传值，子组件不能向父组件传值

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>vue</title>
 6     </head>
 7     <body>
 8         <div id="app">
 9             <counter :count="1" @inc="handleIncrease"></counter>
10             <counter :count="2" @inc="handleIncrease"></counter>
11             <div>{{total}}</div>
12         </div>        
13         
14         <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->
15         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
16         <script>
17             var counter = {
18                 props: ['count'],
19                 data: function() {
20                     return {
21                         number:this.count
22                     }
23                 },
24                 template: '<div @click="handleClick">{{number}}</div>',
25                 methods: {
26                     handleClick: function() {
27                         this.number += 2;
28                         this.$emit('inc', 2)
29                     }
30                 }
31             }
32             var app = new Vue({
33                 el: '#app',
34                 data: {
35                     total: 3                
36                 },
37                 components: {
38                     counter:counter
39                 },
40                 methods: {
41                     handleIncrease: function(step) {
42                         this.total += step
43                     }
44                 }
45             })
46         </script>
47     </body>
48 </html>

猜你喜欢