组件之间的通信（持续补充）

vue中：

1.父级传递给子级：父级v-bind一个属性，里边存放数据（value），子级js中props接收一个数组[]，以此来传递。

2.子级传递给父级：父级@（v-on）一个函数func_father，子级也@一个函数click,在子级js中函数中触发父级函数func_father，从而子级操作，父级改变。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
 6 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
 7 </head>
 8 <body>
 9 <div id="app">
10     <div id="counter-event-example">
11       <p>{{ total }}</p>
12       <button-counter v-on:increment="incrementTotal"></button-counter>
13       <button-counter v-on:increment="incrementTotal"></button-counter>
14     </div>
15 </div>
16 
17 <script>
18 Vue.component('button-counter', {
19   template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
20   data: function () {
21     return {
22       counter: 0
23     }
24   },
25   methods: {
26     incrementHandler: function () {
27       this.counter += 1
28       this.$emit('increment')//传到父级中的@监听事件，以此触发个数加一
29     }
30   },
31 })
32 new Vue({
33   el: '#counter-event-example',
34   data: {
35     total: 0
36   },
37   methods: {
38     incrementTotal: function () {
39       this.total += 1
40     }
41   }
42 })
43 </script>
44 </body>
45 </html>

 

posted @ 2018-10-30 20:15  web前端煜  阅读(195)  评论(0)    收藏  举报