vue中的组件通信

发表于 | 分类于 | 阅读次数:

父组件向子组件通信

父组件通过Prop向子组件传递数据。

1
2
3
4
5
6
7
8
9
10
11
12
<!--父组件-->
<parent-component>
  <child-component :dataFromParent="dataFromParent"></child-component>
</parent-component>

<!--子组件-->
<script>
  export default{
    data() {},
    props:['dataFromParent','dataFromParent2']
}
</script>

子组件向父组件通信

子组件通过$emit触发事件向父组件发送数据。

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
<!--子组件 child-->
<template>
<button @click="sendData">Enlarge text</button>
</template>
<script>
  export default{
    data() {},
    methods:{
      sendData(){
        this.$emit("dataFromChild",data);
      }
    }
}
</script>

<!--父组件 parent-->
<template>
<child-component @sendData="getData"></child-component>
</template>
<script>
  export default{
    data() {},
    methods:{
      getData(data){
        console.log(data);
      }
    }
}
</script>

简单应用非父子组件通信

使用事件总线（Event Bus）进行通信。

使用一个空的 Vue 实例作为中央事件总线。

  • 发布消息：bus.$emit(‘EventName’, data)
  • 订阅消息：bus.$on(‘EventName’,(data)=>{console.log(data)})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//eventbus.js
import Vue from 'Vue';
export default  new Vue();

//组件一
import bus from eventbus.js
//发布事件和数据
bus.$emit('EventName', data);

//组件二
//接收事件和数据，在nounted中，看教程说在created中监听，但是我试过报错了。
mounted(){
  bus,$on('EventName',(data)={
    //todo something
  })
}
//在组件销毁前解绑事件，防止出现多次捕获事件的情况
beforeDestroy(){
  bus.off('EventName');
}

复杂应用非父子组件通信

使用全局状态管理Vuex。

文档

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

  1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
  2. 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。