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'  }  
};