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