在Vue.js中,子组件向父组件传参通常通过自定义事件($emit
)来实现。子组件通过触发一个事件,并将需要传递的参数作为事件的负载,父组件在模板中监听这个事件,并在事件处理函数中接收这些参数。
以下是一个简单的示例:
子组件(ChildComponent.vue)
vue复制代码
<template> | |
<button @click="sendToParent">点击向父组件传参</button> | |
</template> | |
<script> | |
export default { | |
methods: { | |
sendToParent() { | |
// 使用$emit触发一个名为'child-event'的事件,并传递一个参数'hello from child' | |
this.$emit('child-event', 'hello from child'); | |
} | |
} | |
} | |
</script> |
父组件(ParentComponent.vue)
vue复制代码
<template> | |
<div> | |
<!-- 在父组件的模板中,使用v-on指令(或@简写)监听子组件的'child-event'事件 --> | |
<ChildComponent @child-event="handleChildEvent" /> | |
</div> | |
</template> | |
<script> | |
import ChildComponent from './ChildComponent.vue'; | |
export default { | |
components: { | |
ChildComponent | |
}, | |
methods: { | |
handleChildEvent(payload) { | |
// 在事件处理函数中,接收从子组件传递过来的参数 | |
console.log(payload); // 输出:'hello from child' | |
} | |
} | |
} | |
</script> |
在这个例子中,当点击子组件中的按钮时,会触发sendToParent
方法,该方法使用$emit
触发一个名为child-event
的事件,并传递一个字符串参数'hello from child'
。父组件在模板中监听这个事件,并在handleChildEvent
方法中接收并处理这个参数