子传父

@defineEmits()

通过编译宏 defineEmits() 的形式实现通信|参数传递|数据传递 - 自定义事件

更多信息，请访问 Declaring Emitted Events

Procedure

在 <script setup> 的顶级作用域下，子组件使用 defineEmits() 宏，以数组的形式，定义向父组件传递的事件；通常使用变量接收定义的事件列表，以便进一步处理

父组件响应子组件传递的事件并处理

为了和普通事件区分，建议加上 emit 前缀

逻辑中推荐使用 camelCase，如：greetingMessage；结构中推荐使用 kebab-case，如：greeting-message

可以直接在子组件结构中，使用专有变量 $emit 发送事件 - 仅限 Vue 环境

子组件

定义传递事件列表，声明变量 emits 接收，并在自定义事件中传递事件；可以携带参数

子组件 <script>

//自定义事件
const emits = defineEmits(['emitSuper', 'emitHi'])

//上来就传递了一个自定义的事件
emits('emitHi', 'hi,there.')

//函数表达式中触发声明的事件
const emitsHandle = () => {
    emits('emitSuper', 'hi,there.')
}

// 具名函数中触发声明的事件
function emitsHandle() {
    emit('emitSubmit')
}

子组件 <template> - 单击触发自定义事件 someEvent；无参

<button @click="emitsHandle">click me</button>

父组件

监听事件 emitSuper，并在回调函数中接收并处理参数

父组件 <template>

<MyComponent @emit-super="callback" />

父组件 <script>

const callback = (e) => {
    console.log('hihihi', e);
}

[] 改造封装的产品列表组件，单击某个产品，跳转到详情页

子组件 - 定义事件并传递产品 id；结构其它内容略

<button class="btn" @click="toDetail(item.id)">详情</button>

const emits = defineEmits(['emitToDetail'])

const toDetail = (id) => {
  emits('emitToDetail', id)
}

父组件 - 接收并响应事件；数据略

<List :lists="lists" @emit-to-detail="doDetail"></List>

const doDetail = (e) => {
    console.log('hi outer', e);
}

[] 点赞组件

封装点赞组件 → 接收父组件拉取的点赞数 → 单击时，点赞数量加1

子组件 - 定义并接收父组件传递的参数，+1后，通过事件回传给父组件

const props = defineProps({
    propLike: Number
})
const emits = defineEmits(['emitInc'])
const incLike = () => {
    emits('emitInc', props.propLike + 1)
}

<div @click="incLike"><span class="fa fa-heart"></span> {{ propLike }}</div>

父组件 - 传递参数并响应事件

<Like :propLike="like" @emit-inc="incLike" />

//传递给子组件的数据
let like = ref(0)

//处理子组件传递的事件
const incLike = (e) => {
  console.log(e);
  like.value = e
}

[] 搜索组件 - 表单

说明：采用内联事件；不推荐，仅作为知识补充

子组件 - Sql.vue

const emits = defineEmits(['emitIpt'])

<input type="text" @input="$emit('emitIpt', $event.target.value)">
<input type="text" @input="(e) => $emit('emitIpt', e.target.value)">

父组件

<Sql @emit-inc="(e) => console.log(e)" />
<Sql @emit-inc="console.log($event)" />

Emitting and Listening to Events

$emit

子组件也可以使用内置方法 $emit 传递事件 - built-in $emit method

<button @click="$emit('someEvent')">click me, no param</button>

<button @click="$emit('someEvent', 'hi,there.')">click me with param</button>

父组件监听传递的事件

<MyComponent @some-event="callback" />

Feature

无法复用

适合简单逻辑