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: stringcount?: 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" />）
• 全局注册组件的最佳实践（通过插件）
• 响应式组件状态封装：使用 useXxx composable 模式
• <script setup name="MyComp"> 配合调试工具展示组件名