this.$emit 使用
时间: 2023-10-19 19:36:12 浏览: 48
this.$emit 是 Vue.js 框架中的一个方法,用于在父组件中触发一个自定义事件,并且传递参数给监听该事件的子组件。它的语法如下:
```javascript
this.$emit(eventName, payload)
```
其中,eventName 是事件的名称,可以是字符串或者符号;payload 是可选的参数,可以传递给监听该事件的子组件。
在父组件中调用 this.$emit 方法后,子组件中通过在模板或者通过监听器绑定相应的事件名称来接收这个事件。例如,在子组件中监听名为 "my-event" 的事件:
```html
<template>
<div>
<!-- 在模板中监听事件 -->
<button @click="handleClick">Click Me</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
// 子组件中触发 "my-event" 事件并传递参数
this.$emit('my-event', 'Hello from child component');
},
},
};
</script>
```
在父组件中使用子组件并监听 "my-event" 事件:
```html
<template>
<div>
<!-- 使用子组件 -->
<child-component @my-event="handleEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
handleEvent(payload) {
console.log(payload); // 输出:'Hello from child component'
// 处理事件的逻辑
},
},
};
</script>
```
当子组件中的按钮被点击时,会触发 "my-event" 事件,并且父组件中的 handleEvent 方法会被调用,同时传递了子组件中触发事件时传递的参数。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)