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