数据共享

在 Vue.js 中，组件是一个非常重要的概念，而组件之间的数据共享也是 Vue.js 构建复杂应用的基础。

Props

使用Props可以让父组件向子组件传递数据。子组件通过Props接收这些数据并在模板中使用。

父组件：

<template>
  <child-component :message="message" />
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: "Hello World!",
    };
  },
};
</script>

子组件：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String,
  },
};
</script>

父组件向子组件传递了一个名为message的Prop。子组件使用Props接收这个数据，并在模板中使用。

$emit

使用$emit可以让子组件向父组件发送事件并传递数据。父组件可以监听这个事件并在相应的处理函数中获取这个数据。 父组件：

<template>
  <div>
    <child-component @my-event="handleMyEvent" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue";

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: "",
    };
  },
  methods: {
    handleMyEvent(message) {
      this.message = message;
    },
  },
};
</script>

子组件：

<template>
  <button @click="emitMyEvent">Click me!</button>
</template>

<script>
export default {
  methods: {
    emitMyEvent() {
      this.$emit("my-event", "Hello World!");
    },
  },
};
</script>

子组件向父组件发送了一个名为my-event的事件并传递了一个数据"Hello World!"。父组件监听这个事件，并在处理函数handleMyEvent中获取这个数据。

EventBus

EventBus（事件总线）是 Vue.js 中一种常用的组件间通信方式，它基于 Vue 实例，通过创建一个空的 Vue 实例来实现组件间的通信。
可以使用 $on 方法监听事件，使用 $emit 方法触发事件，从而实现组件之间的通信。
在 Vue 应用程序中可以在任何地方引入 EventBus，然后使用它在组件之间进行通信。

创建 EventBus

在使用 EventBus 之前，需要在项目中创建一个 EventBus：

// EventBus.js
import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

这个文件会返回一个空的 Vue 实例，我们可以在任何组件中使用它。

发送事件

在需要向其他组件发送事件的地方可以使用 EventBus.$emit 方法。可以在一个组件中发送一个名为 changeColor 的事件：

// ComponentA.vue
import EventBus from './EventBus.js';
export default {
  data() {
    return {
      color: 'blue'
    }
  },
  methods: {
    changeColor(color) {
      this.color = color;
      EventBus.$emit('changeColor', color);
    }
  }
}

changeColor 方法会修改当前组件的 color 属性，并使用 EventBus.$emit 方法发送一个名为 changeColor 的事件，事件的值为 color 参数。

监听事件

在需要接收其他组件发送的事件的地方可以使用 EventBus.$on 方法：

// ComponentB.vue
import EventBus from './EventBus.js';
export default {
  data() {
    return {
      color: 'red'
    }
  },
  created() {
    EventBus.$on('changeColor', (color) => {
      this.color = color;
    })
  }
}

这个代码块中的 created 生命周期钩子会在组件被创建时调用。在这里，使用 EventBus.$on 方法监听名为 changeColor 的事件，并在事件被触发时将 color 属性的值更新为事件的值。