码迷,mamicode.com
首页 > 其他好文 > 详细

vue 父子组件传值

时间:2018-05-13 18:05:59      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:this   handle   src   ops   ret   不能   methods   code   method   

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

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

 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>

 

vue 父子组件传值

标签:this   handle   src   ops   ret   不能   methods   code   method   

原文地址:https://www.cnblogs.com/1032473245jing/p/9032715.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!