Vue组件通信

Posted on

Vue组件之间的通信主要归为如下形式：
父子组件之间的通信
任意两个组件之间的通信（父子组件通信，爷孙组件通信，兄弟组件通信）
最终的boss，Vuex-状态管理模式
由繁到简，我们可以首先探讨一下父子之间的通信

1.子组件想改父组件的
1
父组件传属性给子组件，子组件发事件给父组件，父组件再传属性给子组件，如此循环。












1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
```
Vue.component('child', {
  props: ['visible'],
  template: `
    <div>
      我是儿子
      
      <grand-child v-show="visible" @close="$emit('close')"></grand-child>
    </div>
  `
})
Vue.component('grandChild', {
  template: `
    <div>
      我是孙子
      <button @click="$emit('close')">关闭</button>
    </div>
})
new Vue({
  el: '#app',
  data: {
    message: '我是爷爷',
    xxx: false,
  },
  methods: {
    log() {
      console.log('爷爷收到消息')
    }
  }
})

  • 情形二：孙子向上一层一层通知爷爷
    示例

    3.兄弟组件之间的通信

    想要在两个兄弟组件之间通信，需要一个中间的桥梁，那么在这里我们可以使用 
    1
    2

    创建一个Vue对象

// bus.js
export default new Vue();

1
使用```$on```进行监听

import Bus from ‘../bus.js’;
export default {
ready() {
Bus.$on(‘loadSuccess’, text => {
this.show = true;
this.status = ‘loadSuccess’
if (text) {
this.text = text;
}
})
},
}

1
使用```$emit```触发事件

ajax({
url: Config.API_ADDRESS_ADD,
type: ‘post’,
dataType: ‘json’,
data: data
}).then((data)=>{
Bus.$emit(‘loadSuccess’, ‘添加成功！’);
}).catch((data)=> {
})
使用$once注册，触发之后即被销毁。 使用$off`解绑事件

以上就是Vue组件通信的几种形式，另外，当项目比较大，通信比较复杂时，我们可以考虑使用Vuex 。