企业官网建设流程全解析

在 Vue 3 + JavaScript 环境中，defineProps和defineEmits是<script setup>语法糖中用于声明组件 props 和自定义事件的编译时宏。以下是详细用法说明和示例。

一、defineProps —— 声明父传子的数据

基本用法

<script setup> // 基础写法：数组形式（不推荐，无类型校验） const props = defineProps(['title', 'count']) // 对象形式（推荐，可添加校验） const props = defineProps({ title: String, count: { type: Number, required: true, default: 0 }, isShow: { type: Boolean, default: false } }) </script> <template> <div> <h2>{{ title }}</h2> <p>Count: {{ count }}</p> <p v-if="isShow">显示内容</p> </div> </template>

常用校验选项

age:{type:Number,validator:(value)=>value>=0&&value<=150}

二、defineEmits —— 声明子传父的事件

基本用法

<script setup> const emit = defineEmits(['change', 'submit']) const handleClick = () => { emit('change', '新值') emit('submit', { id: 1 }) } </script> <template> <button @click="handleClick">触发事件</button> </template>

对象写法（支持校验）

constemit=defineEmits({change:(payload)=>typeofpayload==='string',submit:null// 无校验})

三、完整示例（父子组件通信）

子组件 Child.vue

<script setup> const props = defineProps({ msg: { type: String, default: 'Hello' } }) const emit = defineEmits(['reply']) const sendReply = () => { emit('reply', '来自子组件的消息') } </script> <template> <div> <p>{{ msg }}</p> <button @click="sendReply">回复父组件</button> </div> </template>

父组件 Parent.vue

<script setup> import { ref } from 'vue' import Child from './Child.vue' const message = ref('父组件消息') const handleReply = (val) => { console.log(val) } </script> <template> <Child :msg="message" @reply="handleReply" /> </template>

四、注意事项（非常重要）

1. 只能在<script setup>中使用
2. 无需导入（编译器自动处理）
3. props 是只读的（不能直接修改）
4. 事件名推荐使用 kebab-case
5. 不支持 TypeScript 时，对象写法更灵活

五、与 options API 对比

如果你需要TypeScript 版本、默认值合并技巧或与 v-model 结合使用，可以继续问我 👍