用 $emit 向带参函数传递参数：解构赋值的妙用

用 $emit 为带参函数传递参数：解构赋值的妙用

问题

在 Vue 组件中，$emit 可用于触发自定义事件，并将参数传递给事件处理函数。但当事件处理函数已带有一个或多个参数时，如何传递额外的参数就成了一大难题。

解决方法：解构赋值

Vue 提供了 解构赋值 语法，可从对象中提取值并分配给变量。利用该语法，你可以访问 $emit 传递的参数，同时保留事件处理函数的现有参数。

代码示例

修改后的组件代码：

<input @blur="$emit('customEvent', arg1)" v-model="arg1">

修改后的 HTML 模板代码：

<component @customEvent="method1({ arg2 })"></component>

在 Vue 实例中，修改 method1 函数：

method1({ arg2 }) {
  console.log("This is the arg2: " + arg2);
  console.log("This is the arg1: " + this.$event.arg1);
}

原理解析

通过解构赋值，你可以访问 $emit 传递的参数 arg1，同时保留事件处理函数的现有参数 arg2。

实战演示

假设你有一个组件：

<template>
  <input @blur="$emit('customEvent', arg1)" v-model="arg1">
</template>

你可以在 HTML 模板中使用该组件：

<component @customEvent="method1(arg2)"></component>

在 Vue 实例中，定义 method1 函数：

method1(arg2) {
  console.log("This is the arg2: " + arg2);
  console.log("This is the arg1: " + this.$event.arg1);
}

当组件中的输入框失去焦点时，它将触发 customEvent 事件，并将 arg1 作为参数传递给事件处理函数 method1。method1 函数使用解构赋值从事件对象中提取 arg1，同时保留其自己的 arg2 参数。

运行结果

This is the arg2: foo
This is the arg1: bar

常见问题解答

1. 解构赋值的兼容性如何？

答：解构赋值在现代浏览器中得到广泛支持，包括 Chrome、Firefox、Edge 和 Safari。

2. 除了 $emit，解构赋值还有哪些应用场景？

答：解构赋值可用于从任何对象中提取值，包括对象、数组和函数参数。

3. 解构赋值的语法限制是什么？

答：解构赋值的语法限制包括：

• 变量名必须与对象的键名相同。
• 变量名不能重复。
• 变量名不能使用保留字。

4. 解构赋值可以嵌套使用吗？

答：可以，解构赋值可以嵌套使用以从嵌套对象中提取值。

5. 解构赋值会影响原始对象吗？

答：不会，解构赋值只创建对原始对象值的引用，不会修改原始对象。