emit: 分发自定义事件的函数, 相当于 this.$emit。
时间: 2024-04-03 10:30:10 浏览: 57
事件分发机制demo
emit函数是一种用于分发自定义事件的函数,类似于Vue.js中的this.$emit方法。它允许您在应用程序中的一个组件中触发一个事件,并在其他组件中监听和响应该事件。以下是一个示例代码,演示了如何使用emit函数:
```javascript
// 定义一个组件
const ComponentA = {
template: `
<button @click="emitEvent">点击触发事件</button>
`,
methods: {
emitEvent() {
this.$emit('custom-event', '自定义事件的参数');
}
}
};
// 在父组件中使用ComponentA,并监听custom-event事件
const ParentComponent = {
template: `
<div>
<component-a @custom-event="handleEvent"></component-a>
<p>接收到的事件参数:{{ eventParam }}</p>
</div>
`,
data() {
return {
eventParam: ''
};
},
methods: {
handleEvent(param) {
this.eventParam = param;
}
},
components: {
ComponentA
}
};
// 创建Vue实例并挂载到页面上
new Vue({
el: '#app',
components: {
ParentComponent
},
template: `
<div>
<parent-component></parent-component>
</div>
`
});
```
在上面的代码中,ComponentA组件中的按钮被点击时,会触发custom-event事件,并传递一个参数。ParentComponent组件监听custom-event事件,并将接收到的参数显示在页面上。
阅读全文