怎么做网络推广公司免费网站做seo
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" />）- 全局注册组件的最佳实践（通过插件）
- 响应式组件状态封装：使用
useXxxcomposable 模式 <script setup name="MyComp">配合调试工具展示组件名