Vue 3 自定义事件：实现子传父

Vue 3 自定义事件：实现子传父

在开发 Vue 应用时，我们经常会遇到一个场景：子组件需要将数据传递给父组件。例如，你可能有一个子组件（如表单或按钮），需要在用户操作时将数据传递给父组件进行处理。那么，如何实现这种子组件向父组件的数据传递呢？

问题情景：子组件如何向父组件传递数据？

假设你正在开发一个简单的应用，其中包含一个父组件和一个子组件。子组件是一个按钮，用户点击按钮时，需要将一条消息传递给父组件。父组件接收到消息后，将其显示在页面上。

那么，如何实现这种子组件向父组件的数据传递呢？

解决方案：使用自定义事件

Vue 提供了一种机制，允许子组件通过自定义事件将数据传递给父组件。事件大家肯定不陌生，比如鼠标点击事件、键盘按下事件，这些都是系统自带的，而自定义事件就是我们可以自己定义的事件。自定义事件是 Vue 中实现子组件向父组件通信的核心机制。

1. 父组件绑定自定义事件

父组件可以通过 v-on 或 @ 绑定子组件的自定义事件，并定义一个回调函数来处理事件。

示例代码：

父组件（Father.vue）

vue复制

<template>
  <div>
    <h4>父组件</h4>
    <Child @sendToy="receiveToy" />
    <h4 v-if="toy">子组件传递的玩具：{{ toy }}</h4>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

const toy = ref(null);

function receiveToy(value) {
  toy.value = value;
}
</script>

这里sendToy事件被触发后，调用receiveToy()方法，这里子组件携带的参数自动被注入到receiveToy()方法的参数中。

这里说一下v-if和v-show的区别。

v-if 是一个条件渲染指令，用于根据条件决定是否渲染某个元素。如果条件为 false，元素将不会被渲染到 DOM 中。

v-if 是真正的条件渲染，因为它确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

如果条件为 false，DOM 元素完全不存在，因此不会占用任何资源。

如果条件频繁切换，v-if 可能会带来一定的性能开销，因为它需要不断地创建和销毁 DOM 元素。

v-show 也是一个条件渲染指令，但它通过 CSS 的 display 属性来控制元素的显示和隐藏。无论条件如何，元素始终会被渲染到 DOM 中。

v-show 的切换开销较小，因为它只是简单地切换 CSS 属性，不会重新渲染 DOM 元素。

无论条件如何，元素始终存在于 DOM 中，因此它不会节省资源，但切换速度更快。

这和懒汉模式和饿汉模式差不多的原理吧。

2. 子组件触发自定义事件

子组件可以通过 $emit 方法触发自定义事件，并传递数据给父组件。

示例代码：

子组件（Child.vue）

vue复制

<template>
  <div>
    <h4>子组件</h4>
    <button @click="sendToy">把玩具传递给父组件</button>
  </div>
</template>

<script setup>
import { defineEmits } from 'vue';

const emit = defineEmits(['sendToy']);

function sendToy() {
  emit('sendToy', '奥特曼');
}
</script>

defineEmits为声明事件，触发事件可以携带参数

3. 运行效果

1. 父组件：

• 显示一个子组件。

• 接收到子组件传递的数据后，将其显示在页面上。

1. 子组件：

• 包含一个按钮。

• 用户点击按钮时，触发自定义事件 sendToy，并将数据（如玩具名称）传递给父组件。

运行结果：

• 点击子组件中的按钮后，父组件会接收到子组件传递的玩具名称（如“奥特曼”），并将其显示在页面上。

4. 自定义事件的注意事项

问题 1：事件名称的命名规范

• 问题：自定义事件的名称应该使用什么格式？

• 答案：推荐使用 kebab-case（短横线命名），例如 send-toy。避免使用驼峰命名（camelCase），因为这可能导致在模板中使用时出现问题。

问题 2：如何同时传递事件对象和其他数据？

• 问题：如果需要同时传递事件对象和其他数据，怎么办？

• 答案：可以在 $emit 中明确传递事件对象和其他数据：

  JavaScript复制

emit('eventName', event, otherData);

问题 3：事件的触发时机

• 问题：自定义事件可以在哪些时刻触发？

• 答案：自定义事件可以在任何需要的时刻触发，例如点击按钮、组件挂载后等。

5. 总结

通过自定义事件，你可以轻松实现子组件向父组件的数据传递。具体步骤如下：

1. 父组件绑定事件：使用 @eventName="handler"。

2. 子组件触发事件：使用 $emit('eventName', data)。

3. 处理事件：在父组件中定义回调函数处理传递的数据。

我们在使用的时候要注意事件名称规范：推荐使用 kebab-case（短横线命名）肉串命名。事件对象传递：明确传递事件对象和其他数据和代码清晰性：确保事件名称和回调函数的命名具有语义化。