Vue组件通信

非父子组件通信

事件总线

非父子组件之间，进行简易消息传递，可以使用事件总线（Event Bus）。

使用步骤：

1. 创建一个都能访问的事件总线（空Vue实例，放到utils/EventBus.js）
2. A组件（接收方）监听Bus实例的事件（订阅消息）
3. B组件（发送方）触发Bus实例的事件（发布消息）

src\utils\EventBus.js文件：

// 1. 创建一个都能访问的事件总线（空Vue实例）
import Vue from 'vue'

const Bus = new Vue()

export default Bus

src\components\BaseA.vue文件：

<template>
  <div>
    A组件（接收方）
    <p>{{ msg }}</p>
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
  created() {
    // 2. A组件（接收方）监听Bus实例的事件（订阅消息）
    Bus.$on('sendMsg', (msg) => {
      this.msg = msg
    })
  },
  data() {
    return {
      msg: '',
    }
  },
}
</script>

src\components\BaseB.vue文件：

<template>
  <div>
    B组件（发送方）
    <button @click="clickSend">发布通知</button>
  </div>
</template>

<script>
import Bus from '../utils/EventBus'
export default {
  methods: {
    clickSend() {
      // 3. B组件（发送方）触发Bus实例的事件（发布消息）
      Bus.$emit('sendMsg', '消息内容')
    },
  },
}
</script>

src\App.vue文件：

<template>
  <div>
    <BaseA></BaseA>
    <br />
    <hr />
    <br />
    <BaseB></BaseB>
  </div>
</template>

<script>
import BaseA from './components/BaseA.vue'
import BaseB from './components/BaseB.vue'
export default {
  components: {
    BaseA,
    BaseB,
  },
}
</script>

provide和inject

作用是用来跨层级共享数据。

使用步骤：

1. 父组件provide提供数据
2. 子/孙组件inject取值使用

src\App.vue文件：

<template>
  <div>
    App组件
    <br />
    <SonA></SonA>
    <br />
    <SonB></SonB>
  </div>
</template>

<script>
import SonA from './components/SonA.vue'
import SonB from './components/SonB.vue'
export default {
  provide() {
    return {
      color: this.color, //简单类型（非响应式）
      userInfo: this.userInfo, //复杂类型（响应式）- 推荐
    }
  },
  data() {
    return {
      color: 'red',
      userInfo: {
        name: '张三',
        age: 18,
      },
    }
  },
  components: {
    SonA,
    SonB,
  },
}
</script>

src\components\SonA.vue文件：

<template>
  <div>
    -SonA组件
    <GrandSon></GrandSon>
  </div>
</template>

<script>
import GrandSon from './GrandSon.vue'
export default {
  components: {
    GrandSon,
  },
}
</script>

src\components\GrandSon.vue文件：

<template>
  <div>--GrandSon组件：{{ color }} - {{ userInfo.name }}</div>
</template>

<script>
export default {
  inject: ['color', 'userInfo'],
}
</script>

src\components\SonB.vue文件：

<template>
  <div>-SonB组件：{{ color }} - {{ userInfo.age }}</div>
</template>
<script>
export default {
  inject: ['color', 'userInfo'],
}
</script>