首页vue中子级向父级传参

vue中子级向父级传参

时间: 2025-06-23 11:30:12 浏览: 17

### Vue.js 中子组件向父组件传递参数的方法在Vue.js中，`$emit` 是一种常用的机制用于子组件向父组件发送消息或数据。通过 `$emit` 可以触发自定义事件，并可以携带额外的数据作为参数传给监听该事件的父级组件。 #### 定义并发射事件 (子组件) 当希望从子组件 `child.vue` 发送信息到其父组件时，在适当的地方调用此方法： ```javascript // child.vue export default { methods: { sendDataToParent() { const data = '来自子组件的信息'; this.$emit('custom-event', data); // 触发名为 custom-event 的事件并向上传递data变量中的值[^2] } } } ``` #### 接收事件 (父组件) 为了接收这些由子组件发出的消息，可以在模板内绑定相应的处理函数至特定名称的事件上；这里假设父组件为 `app.vue`: ```html  <template> <div id="app">  <child-component @custom-event="handleChildEvent"></child-component> </div> </template> <script> import ChildComponent from './components/ChildComponent.vue'; export default { components: { ChildComponent }, methods: { handleChildEvent(dataFromChild) { console.log(`接收到子组件传来的内容：${dataFromChild}`); // 输出日志显示接收到的数据 } } }; </script> ``` 上述代码展示了完整的流程——即如何利用 `$emit` 实现子组件向父组件传输任意形式的数据。每当子组件内部执行了 `sendDataToParent()` 函数之后就会激活这个过程，进而使得父组件能够捕获到来自于子组件的通知及其附带的数据。

阅读全文