Vue组件通信的方式

props 父传子

父组件向子组件传递数据：通过props属性将数据从父组件传递给子组件。

<template>  
  <div>  
    <child-component :message="parentMessage"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from Parent'  
    };  
  }  
};  
</script>

在 Vue 2 中，子组件可以直接使用props获取

<template>  
  <div>  
    <p>{{ message }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  props: ['message'], // 声明要接收的props  
  created() {  
    console.log(this.message); // 在组件的生命周期钩子中访问props  
  }  
};  
</script>

在 Vue 3 中，你可以使用 defineProps 来定义组件的 props

<script setup lang="ts">  
import { defineProps } from 'vue'  
  
const props = defineProps({  
  message: String,  
  count: {  
    type: Number,  
    default: 0  
  }  
})  
</script>  
  
<template>  
  <div>  
    <h1>{{ message}}</h1>  
    <p>Count: {{ count }}</p>  
  </div>  
</template>

$emit 子传父

通过$emit方法在子组件中触发一个事件，然后在父组件中监听这个事件。

子组件中：

<template>  
  <div>  
    <button @click="sendMessageToParent">Click me</button>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    sendMessageToParent() {  
      const childMessage = 'Hello from Child';  
      this.$emit('getChildData', childMessage);  
    }  
  }  
};  
</script>

父组件中：

<template>  
  <div>  
    <child-component @getChildData="handleChildMessage"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  methods: {  
    handleChildMessage(message) {  
      console.log(message); // 输出 'Hello from Child'  
    }  
  }  
};  
</script>

事件总线（Event Bus）

使用事件总线（Event Bus）：创建一个全局的Vue实例作为事件总线，在组件之间通过这个实例来触发和监听事件。

// event-bus.js  
import Vue from 'vue';  
export const EventBus = new Vue();  
  
// 在组件A中  
import { EventBus } from './event-bus';  
EventBus.$emit('custom-event', 'data to share');  
  
// 在组件B中  
import { EventBus } from './event-bus';  
EventBus.$on('custom-event', (data) => {  
  console.log(data); // 输出 'data to share'  
});

使用Vuex\Pinia状态管理库

Vuex是Vue的状态管理库，用于在多个组件之间共享状态。

• 在Vuex中定义state、mutations、actions等。
• 在组件中使用this.$store来访问Vuex store，并通过mapState、mapMutations、mapActions等辅助函数来简化操作。

使用provide/inject

父组件使用provide选项提供数据，子组件通过inject选项来注入这些数据。

父组件：

export default {  
  provide() {  
    return {  
      sharedData: 'data to share'  
    };  
  }  
};

子组件中：

export default {  
  inject: ['sharedData'],  
  mounted() {  
    console.log(this.sharedData); // 输出 'data to share'  
  }  
};