首页vue2.0子组件向父组件传值

vue2.0子组件向父组件传值

时间: 2025-05-02 22:35:21 浏览: 20

### 实现子组件向父组件传递数据在 Vue 2.0 中，子组件可以通过 `$emit` 方法触发事件来通知父组件，并可以携带参数。父组件监听这些自定义事件并作出响应。 #### 使用 `v-on` 和 `$emit` 父组件通过 `v-on` 绑定子组件发出的事件，在子组件内部调用 `this.$emit('eventName', payload)` 发送消息给父级[^1]。 ```html  <template> <div @click="sendDataToParent">点击发送</div> </template> <script> export default { methods: { sendDataToParent() { const data = '来自子组件的信息'; this.$emit('child-event', data); } } } </script> ``` ```html  <template> <div> <ChildComponent v-on:child-event="handleEvent"></ChildComponent> </div> </template> <script> import ChildComponent from './components/ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleEvent(data) { console.log(`接收到来自子组件的数据：${data}`); } } }; </script> ``` 当用户点击子组件内的按钮时，会执行 `sendDataToParent()` 函数并通过 `$emit` 向外抛出名为 `child-event` 的事件以及附加的消息字符串作为负载。父组件则绑定了这个特定名称的事件处理器函数 `handleEvent` 并处理传入的数据。此外，如果需要更复杂的交互模式比如兄弟间通讯或者跨多层嵌套组件间的通信，则可能需要用到中央事件总线或者其他状态管理模式如 Vuex[^2]。

阅读全文