$emit组件传值示例
时间: 2023-11-14 18:10:18 浏览: 31
$emit是Vue.js中用于组件之间传值的方法之一。它可以让子组件向父组件传递数据。下面是一个$emit组件传值的示例:
假设我们有两个组件,一个是父组件,另一个是子组件。子组件中有一个按钮,当点击按钮时,子组件会向父组件传递一个数据。具体实现步骤如下:
1.在子组件中定义一个方法,用于触发$emit事件,并传递数据。例如:
```
methods: {
sendData() {
this.$emit('eventName', data)
}
}
```
其中,eventName是自定义的事件名,data是要传递的数据。
2.在父组件中监听子组件的$emit事件,并在回调函数中获取传递的数据。例如:
```
<template>
<div>
<child-component @eventName="handleEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
handleEvent(data) {
console.log(data)
}
}
}
</script>
```
其中,ChildComponent是子组件的名称,eventName是子组件中定义的事件名,handleEvent是父组件中定义的回调函数,用于获取子组件传递的数据。
以上就是一个简单的$emit组件传值的示例。需要注意的是,$emit和$on的事件必须在一个公共的实例上,才能够触发。