vue2 自定义事件
时间: 2023-09-19 08:06:26 浏览: 47
在Vue2中,自定义事件是通过使用`$emit`方法来触发和传递数据的。你可以定义一个自定义事件名,并在组件内部使用`$emit`方法触发该事件。然后,在父组件中使用`v-on`指令来监听该自定义事件并执行相应的方法。
例如,在父组件App.vue中,你可以绑定一个自定义事件`update-count`,并在子组件中触发该事件,并把学生名作为参数传递给父组件。然后,在父组件中定义一个名为`changeCount`的方法来处理该事件,并将传递的学生名显示出来。
下面是一个示例代码:
```html
<template>
<div id="app">
<!-- 绑定自定义事件update-count -->
<child v-on:update-count="changeCount"></child>
<p>{{ count }}</p>
</div>
</template>
<script>
import Child from './components/Child.vue';
export default {
components: {
Child
},
data() {
return {
count: ''
};
},
methods: {
changeCount(studentName) {
this.count = studentName;
}
}
}
</script>
```
在子组件Child.vue中,你需要触发自定义事件`update-count`并传递学生名作为参数。可以使用`$emit`方法来实现:
```html
<template>
<div>
<button @click="sendName">发送学生名</button>
</div>
</template>
<script>
export default {
methods: {
sendName() {
const studentName = '张三'; // 这里可以根据具体情况获取学生名
this.$emit('update-count', studentName);
}
}
}
</script>
```
当你点击子组件中的按钮时,父组件App.vue中的`changeCount`方法会被调用,并将传递的学生名显示在页面上。
总结起来,Vue2中的自定义事件是通过使用`$emit`方法触发和传递数据的,可以在父组件中使用`v-on`指令监听该事件并执行相应的方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue2知识点:组件自定义事件](https://blog.csdn.net/a924382407/article/details/124994995)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [【Vue2】组件通信 之 自定义事件](https://blog.csdn.net/Superman_H/article/details/122834638)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]