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

Posted 2021-01-16 liuyuweb

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了组件之间的通信（持续补充）相关的知识，希望对你有一定的参考价值。

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>

以上是关于组件之间的通信（持续补充）的主要内容，如果未能解决你的问题，请参考以下文章

在tablayout片段之间进行通信[重复]