组件事件

触发与监听事件

在组件的模板表达式中，可以直接使用$emit()函数触发自定义事件(例如：在v-on的处理函数中)：

click me

父组件可以通过v-on（缩写为@）来监听事件：

同样，组件的事件监听器也支持.once修饰符：

组件与 prop 一样，事件的名字也提供了自动转换。请注意，我们触发了一个以camelCase形式命名的事件，但在父组件中可以使用kebab-case形式来监听。与 prop 大小写格式一样，在模板中我们也推荐使用kebab-case形式来编写监听器。

TIP：和原生 DOM 事件不太一样，组件触发的事件不会冒泡。你只能监听直接子组件触发的事件。

事件参数

有时候我们会需要在触发事件时附带一个特定的值。举个例子，我们想要组件来管理文本会缩放得多大。在这个场景下，我们可以给$emit提供一个值作为额外的参数：

 Increase by 1 

然后我们在父组件中监听事件，我们可以先简单写一个内联的箭头函数作为监听器，此时可以访问到事件附带的参数：

或者用一个方法函数来作为事件处理函数：

然后，可以从方法的第一个参数上取到这个值：

//js
function increaseCount(n) {
  count.value += n
}

传入$emit()的所有参数都会被直接传向监听器。

template


js
function increase(n1,n2,n3) {
  //......
}

MyButton.vue
监听器 foo，将会收到这三个参数值

  Increase by 1 

声明触发的事件

组合式 API 中，自定义定义要触发的事件，可以显式地通过defineEmits()宏来声明。

返回的emit()函数可以用来在 JavaScript 代码中触发事件。

组合式 API中，即，你没有使用

如果你正在搭配

更多细节：如何为组件所抛出事件标注类型

尽管是可选的，我们还是推荐你定义所有要触发的事件，以此更好地在代码中描述和呈现组件的作用。这也使得 Vue 能更好地将事件和透传 attribute 作出区分。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com