Vue @事件是Vue.js中的一种特殊语法,它可以让开发者在模板中声明式地绑定一个方法到一个DOM元素上。@事件可以用来处理用户的输入,例如键盘输入、鼠标点击和拖拽等。
@事件的使用方法很简单,只需要在DOM元素上使用v-on指令,然后将要执行的方法作为参数传递进去即可。例如:
<div v-on:click="sayHello">Click me!</div>
上面的代码中,当用户点击div元素时,就会触发sayHello方法。
@事件也可以传递一个参数到方法中,例如:
<div v-on:click="sayHello('John')">Click me!</div>
上面的代码中,当用户点击div元素时,就会触发sayHello方法并把'John'作为参数传递进去。
此外,@事件还有一些特殊的功能,例如修饰器、key修饰器、mouse修饰器、capture修饰器、once修饰器、passive修饰器、system修饰器。这些功能都是为了帮助开发者更好地处理DOM元素上的各种不同事件。
总之,Vue @事件提供了一套实用而强大的API来处理DOM元素上的各种不同事件。它使得开发者能够快速而有效地实施前端应用功能。
$on
,$off
和 $once
实例方法已被移除,应用实例不再实现事件触发接口。
在 2.x 中,Vue 实例可用于触发通过事件触发 API 强制附加的处理程序 ($on
,$off
和 $once
),这用于创建 event hub,以创建在整个应用程序中使用的全局事件侦听器:
// eventHub.js
const eventHub = new Vue()
export default eventHub
// ChildComponent.vue
import eventHub from "./eventHub"
export default {
mounted() {
// 添加 eventHub listener
eventHub.$on("custom-event", () => {
console.log("Custom event triggered!")
})
},
beforeDestroy() {
// 移除 eventHub listener
eventHub.$off("custom-event")
}
}
// ParentComponent.vue
import eventHub from "./eventHub"
export default {
methods: {
callGlobalCustomEvent() {
eventHub.$emit("custom-event") // 如果ChildComponent mounted,控制台中将显示一条消息
}
}
}
我们整个从实例中移除了 $on
,$off
和 $once
方法,$emit
仍然是现有 API 的一部分,因为它用于触发由父组件以声明方式附加的事件处理程序
例如,可以通过使用实现事件发射器接口的外部库来替换现有的 event hub mitt。
在兼容性构建中也可以支持这些方法。
#创建一个应用实例每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的:const app = Vue.createApp({})该应用实...