Vue 3 组件高级语法
Vue 3 在组件开发方面引入了许多高级语法和新特性，这些让组件更加灵活、可组合、类型安全，并且更适合大型项目的架构需求。下面是 Vue 3 组件相关的高级语法 总结👇
🔹 1. <script setup> 中的 defineProps 和 defineEmits
✅ 定义 props 和 emits
<script setup>
const props = defineProps({
title: String,
count: {
type: Number,
default: 0
}
})
const emit = defineEmits(['increment'])
</script>
✅ 支持类型推导（TypeScript）
<script setup lang="ts">
interface Props {
title: string
count?: number
}
const props = defineProps<Props>()
const emit = defineEmits<{
(e: 'increment', value: number): void
}>()
</script>
🔹 2. defineExpose（组件对外暴露方法）
<script setup>
const sayHello = () => {
console.log('Hello from child!')
}
defineExpose({
sayHello
})
</script>
父组件中用 ref 拿到子组件实例后可调用：
<template>
<Child ref="childRef" />
<button @click="callChild">Call Child</button>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'
const childRef = ref()
function callChild() {
childRef.value.sayHello()
}
</script>
🔹 3. v-model 多值绑定（多个 prop）
<!-- 父组件 -->
<Child v-model:title="title" v-model:count="count" />
<!-- 子组件 -->
<script setup>
const modelTitle = defineModel('title')
const modelCount = defineModel('count')
</script>
🔹 4. 动态组件 <component :is="...">
<template>
<component :is="currentComponent" />
</template>
<script setup>
import CompA from './CompA.vue'
import CompB from './CompB.vue'
const currentComponent = ref(CompA)
</script>
🔹 5. 异步组件（defineAsyncComponent）
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() =>
import('./HeavyComponent.vue')
)
支持 Suspense 组件包裹：
<Suspense>
<template #default>
<AsyncComp />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
🔹 6. 插槽的高级用法
具名插槽 / 插槽作用域
<!-- 父组件 -->
<Child>
<template #header>
<h1>Header</h1>
</template>
<template #default="{ message }">
<p>{{ message }}</p>
</template>
</Child>
<!-- 子组件 -->
<template>
<slot name="header" />
<slot :message="'Hello from Child!'" />
</template>
🔹 7. provide / inject 跨层级组件通信
// 父组件
<script setup>
import { provide } from 'vue'
provide('theme', 'dark')
</script>
// 子组件
<script setup>
import { inject } from 'vue'
const theme = inject('theme') // 'dark'
</script>
🔹 8. 生命周期钩子（组合式 API）
import { onMounted, onUnmounted, onUpdated } from 'vue'
onMounted(() => {
console.log('Component mounted!')
})
🔹 9. v-bind="$attrs" & inheritAttrs: false
<script setup>
defineOptions({
inheritAttrs: false // 不自动传递到根节点
})
</script>
<template>
<input v-bind="$attrs" />
</template>
✨ 你还可以了解：
v-memo：控制模板缓存、优化性能v-is动态组件指令（<div v-is="MyComp" />）- 全局注册组件的最佳实践（通过插件）
- 响应式组件状态封装：使用
useXxxcomposable 模式 <script setup name="MyComp">配合调试工具展示组件名