vu e父子组件传值emit’
时间: 2025-05-28 14:06:53 浏览: 28
### Vue 父子组件通过 `emit` 进行传值
在 Vue 中,父子组件之间的通信可以通过多种方式实现。对于 **子组件向父组件传递数据** 的场景,通常会使用 `$emit` 方法来触发一个自定义事件,并将需要传递的数据作为参数发送到父组件。
以下是具体的实现方法:
#### 子组件部分
子组件中可以调用 `$emit` 来触发一个自定义事件,并将数据作为第二个参数传递出去。例如,在某个按钮点击事件中触发该操作。
```javascript
<template>
<button @click="sendDataToParent">Send Data to Parent</button>
</template>
<script>
export default {
methods: {
sendDataToParent() {
this.$emit('custom-event', 'This is a message from child');
}
}
}
</script>
```
上述代码展示了当按钮被点击时,子组件会触发名为 `'custom-event'` 的事件,并附带一条消息字符串[^3]。
#### 父组件部分
父组件可以在子组件标签上监听这个自定义事件,并将其绑定到自己的处理函数或者直接接收数据。
```html
<template>
<div>
<!-- 绑定子组件的 custom-event -->
<child-component @custom-event="handleCustomEvent"></child-component>
<p>Received Message: {{ receivedMessage }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
data() {
return {
receivedMessage: ''
};
},
methods: {
handleCustomEvent(message) {
this.receivedMessage = message;
}
}
};
</script>
```
在此例子中,父组件绑定了来自子组件的 `'custom-event'` 自定义事件,并通过回调函数 `handleCustomEvent` 接收并存储接收到的消息。
这种模式遵循了 Vue 的单向数据流原则,即父级无法直接修改子级的状态,而子级则能够通知父级其状态的变化。
---
### 示例总结
以上示例清晰地说明了如何利用 `$emit` 实现子组件向父组件传递数据的功能。这种方式不仅灵活而且易于维护,非常适合用于构建模块化程度较高的应用。
---
阅读全文
相关推荐


















