Vue是一種流行的前端框架,它提供了自定義事件的功能。自定義事件是Vue組件間通信的一個重要方式。Vue組件通過$emit方法觸發(fā)自定義事件,其他組件通過$on方法監(jiān)聽自定義事件。自定義事件的參數(shù)可以是任意類型的數(shù)據(jù)。
當我們使用$emit方法觸發(fā)自定義事件時,可以傳遞一個參數(shù),這個參數(shù)就是自定義事件的參數(shù)。下面是一個示例:
Vue.component('child-component', {
methods: {
handleClick() {
this.$emit('my-event', 'Hello, Vue!')
}
}
})
Vue.component('parent-component', {
template: `
<div>
<child-component @my-event="handleEvent"></child-component>
</div>
`,
methods: {
handleEvent(message) {
console.log(message) // Hello, Vue!
}
}
})
在上面的代碼中,首先定義了一個子組件和一個父組件。子組件定義了一個方法handleClick,在該方法中通過$emit方法觸發(fā)了一個自定義事件'my-event',并傳遞了一個字符串'Hello, Vue!'作為事件參數(shù)。父組件定義了一個handleEvent方法,通過@my-event監(jiān)聽了子組件的自定義事件,并接收了子組件傳遞的事件參數(shù)。
需要注意的是,在監(jiān)聽自定義事件時,可以在$on方法的第二個參數(shù)中接收事件參數(shù)。如下面的代碼:
Vue.component('child-component', {
methods: {
handleClick() {
this.$emit('my-event', 'Hello, Vue!')
}
}
})
Vue.component('parent-component', {
template: `
<div>
<child-component @my-event="handleEvent"></child-component>
</div>
`,
methods: {
handleEvent(event, message) {
console.log(message) // Hello, Vue!
}
}
})
在上面的代碼中,handleEvent方法接收了兩個參數(shù):event和message。event參數(shù)表示自定義事件對象,message參數(shù)表示自定義事件的參數(shù)。在監(jiān)聽自定義事件時,可以使用上述方法接收事件參數(shù)。
上一篇php t list