1. Props 和 Events
Props：父组件通过 props 向子组件传递数据。
Events：子组件通过 $emit 向父组件发送事件。
<!-- ParentComponent.vue -->
<template>
<ChildComponent :message="parentMessage" @update-message="updateMessage" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
const parentMessage = ref('Hello from parent');
function updateMessage(newMessage: string) {
parentMessage.value = newMessage;
}
</script>
<!-- ChildComponent.vue -->
<template>
<div>
<p>{{ message }}</p>
<button @click="sendMessage">Send Message</button>
</div>
</template>
<script setup lang="ts">
const props = defineProps<{
message: string;
}>();
const emit = defineEmits<{
(e: 'update-message', message: string): void;
}>();
function sendMessage() {
emit('update-message', 'Hello from child');
}
</script>
2. Provide / Inject
Provide：祖先组件通过 provide 提供数据。
Inject：后代组件通过 inject 获取数据。
<!-- AncestorComponent.vue -->
<template>
<DescendantComponent />
</template>
<script setup lang="ts">
import { provide, ref } from 'vue';
import DescendantComponent from './DescendantComponent.vue';
const message = ref('Hello from ancestor');
provide('message', message);
</script>
<!-- DescendantComponent.vue -->
<template>
<div>
<p>{{ injectedMessage }}</p>
</div>
</template>
<script setup lang="ts">
import { inject } from 'vue';
const injectedMessage = inject('message');
</script>
3. Event Bus
使用一个全局的 Vue 实例作为事件总线，组件可以通过它来发布和订阅事件。
// eventBus.ts
import { createApp } from 'vue';
export const eventBus = createApp({});
// ComponentA.vue
<script setup lang="ts">
import { eventBus } from './eventBus';
function sendMessage() {
eventBus.config.globalProperties.$emit('message', 'Hello from Component A');
}
</script>
// ComponentB.vue
<script setup lang="ts">
import { onMounted } from 'vue';
import { eventBus } from './eventBus';
onMounted(() => {
eventBus.config.globalProperties.$on('message', (message: string) => {
console.log(message);
});
});
</script>
4. Reactive State
使用 Vue 的 reactive 或 ref 创建一个全局状态对象，组件之间共享这个状态。
// sharedState.ts
import { reactive } from 'vue';
export const state = reactive({
message: 'Hello from shared state',
});
// ComponentA.vue
<script setup lang="ts">
import { state } from './sharedState';
function updateMessage() {
state.message = 'Updated message from Component A';
}
</script>
// ComponentB.vue
<template>
<div>
<p>{{ state.message }}</p>
</div>
</template>
<script setup lang="ts">
import { state } from './sharedState';
</script>
5. Composables
使用 Vue 3 的 Composition API 创建可重用的逻辑，组件之间共享状态和逻辑。
// useSharedState.ts
import { ref } from 'vue';
export function useSharedState() {
const message = ref('Hello from composable');
function updateMessage(newMessage: string) {
message.value = newMessage;
}
return { message, updateMessage };
}
// ComponentA.vue
<script setup lang="ts">
import { useSharedState } from './useSharedState';
const { message, updateMessage } = useSharedState();
function changeMessage() {
updateMessage('Updated message from Component A');
}
</script>
// ComponentB.vue
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script setup lang="ts">
import { useSharedState } from './useSharedState';
const { message } = useSharedState();
</script>
6. Teleport
使用 Teleport 将组件渲染到 DOM 中的其他位置，适用于模态框、通知等场景。
<!-- ParentComponent.vue -->
<template>
<div>
<button @click="showModal = true">Show Modal</button>
<Teleport to="body">
<ModalComponent v-if="showModal" @close="showModal = false" />
</Teleport>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import ModalComponent from './ModalComponent.vue';
const showModal = ref(false);
</script>
<!-- ModalComponent.vue -->
<template>
<div class="modal">
<p>This is a modal</p>
<button @click="$emit('close')">Close</button>
</div>
</template>
<script setup lang="ts">
defineEmits(['close']);
</script>
7. Custom Directives
使用自定义指令在组件之间传递数据或执行操作。
// v-my-directive.ts
import { DirectiveBinding } from 'vue';
export const myDirective = {
mounted(el: HTMLElement, binding: DirectiveBinding) {
el.addEventListener('click', () => {
console.log('Directive triggered with value:', binding.value);
});
},
};
// ComponentA.vue
<template>
<button v-my-directive="'Hello from directive'">Click me</button>
</template>
<script setup lang="ts">
import { myDirective } from './v-my-directive';
</script>
8. Global Properties
使用 app.config.globalProperties 添加全局属性或方法，所有组件都可以访问。
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
app.config.globalProperties.$myGlobalFunction = () => {
console.log('Hello from global function');
};
app.mount('#app');
// ComponentA.vue
<script setup lang="ts">
import { getCurrentInstance } from 'vue';
const instance = getCurrentInstance();
instance?.proxy?.$myGlobalFunction();
</script>
9. Custom Events with mitt
使用第三方库 mitt 来实现轻量级的事件总线。
npm install mitt
// eventBus.ts
import mitt from 'mitt';
export const eventBus = mitt();
// ComponentA.vue
<script setup lang="ts">
import { eventBus } from './eventBus';
function sendMessage() {
eventBus.emit('message', 'Hello from Component A');
}
</script>
// ComponentB.vue
<script setup lang="ts">
import { onMounted } from 'vue';
import { eventBus } from './eventBus';
onMounted(() => {
eventBus.on('message', (message: string) => {
console.log(message);
});
});
</script>
10. Context API
使用 Vue 3 的 provide 和 inject 来实现类似 React Context 的功能。
// context.ts
import { provide, inject, ref } from 'vue';
const MessageSymbol = Symbol();
export function provideMessage() {
const message = ref('Hello from context');
provide(MessageSymbol, message);
}
export function useMessage() {
const message = inject(MessageSymbol);
if (!message) {
throw new Error('Message not provided');
}
return message;
}
// ParentComponent.vue
<script setup lang="ts">
import { provideMessage } from './context';
import ChildComponent from './ChildComponent.vue';
provideMessage();
</script>
<template>
<ChildComponent />
</template>
// ChildComponent.vue
<script setup lang="ts">
import { useMessage } from './context';
const message = useMessage();
</script>
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
