Vue前端开发之组件事件

在一个组件中，不仅可以定义属性，还能定义事件，同时，在定义的事件中，还可以传递事件参数，校验参数，组件中定义的事件，可以被调用此组件的父级组件监听，当触发子级组件的事件时，可以接收组件传入的参数值，接下来分别进行详细阐述。

事件定义

如果需要给组件添加事件，可以使用emits 选项进行显示声明，声明的方式有两种，一种是数组格式，如下列代码所示。

<script>
export default {emits: ["myClk", "myFocus"]
}
</script>

在上述加粗代码中，使用emits 选项定义了两个事件，一个事件名为“myClk”，另一个事件名为“myFocus”，这两个事件是组件自定义的事件，可以被父级组件执行。除了上述这种数组格式外，事件还可以使用对象的格式进行声明，如下代码所示。

<script>
export default {emits: {myClk(payload){console.log(payload)},myFocus(payload){console.log(payload)}}
}
</script>

在述加粗代码中，使用对象格式声明了两个与数组格式同名的事件，事件名官方推荐使用驼峰语法(camelCase)来声明，以便于在父组件调用时，可以使用短横线分隔格式监听组件的事件，父组件使用v-on或@来监听子组件的事件，代码如下所示。

<template><myComponent 
@my-clk="fn" 
v-on:myFocus="fn2">
</myComponent>
</template>

在上述父组件监听子组件事件的代码中，使用@简写的方式比较常见，建议大家使用。

事件验证

与验证属性相同，验证事件必须在组件定义时，以对象的形式来描述;在对象中，事件被赋值给一个函数，函数的参数作为执行事件时的实参，通过验证传入实参的有效性，来决定函数返回true或false，从而完成事件执行时合法性的验证，代码如下所示。

<template><div><button @click="doLogin()">单击验证</button></div>
</template><script>
export default {emits: {submit({ userName, userPass }) {if (userName.length != '' && userPass.length != ''){return true;} else {return false;}}},methods: {doLogin() {this.$emit("submit", 
{ userName: "陶国荣", userPass: "123456" })}}
}
</script>

上述代码是一个子类组件，在该组件的代码中，首先添加了一个文字为“单击验证”的按钮，再通过“emits”选项，声明一个名称为“submit”的事件。

在事件声明过程中，验证执行事件时传入事件中的“userName”和“userPass”值是否为空，如果为空，则返回false，否则返回true值。

然后，当点击按钮时，调用$emit方法执行声明的事件并暴露给调用的父组件，该方法的第一个参数为已声明的事件名称，第二个参数为在事件触发时，向父组件传入的子组件数据，这些数据在传入时，将会进行有效性验证。

最后，当父组件在触发声明的“submit”事件时，如果传入值验证不成功，将会在控制台输出“Invalid event arguments”字样的提示信息。

事件监听和传参

组件事件的监听是指当子组件声明的事件被执行时，调用它的父组件就捕获取到了它的执行动作和事件数据，而要实现这种监听的效果，父组件必须绑定子组件中声明的事件，才能完成事件监听的效果，实现代码如下所示。

<template><div><login-item @submit="mySubmit"></login-item></div>
</template>
<script>
import LoginItem from './LoginItem.vue'
export default {components: {LoginItem},methods: {mySubmit(data) {console.log(data)}}
}
</script>