vue3 setup通过h函数如何让子组件回传参数给父组件
时间: 2024-04-30 16:22:22 浏览: 16
在Vue3中,可以通过使用`$emit`方法来让子组件回传参数给父组件。
在子组件中,定义一个方法来触发事件并传递参数:
```javascript
<script>
export default {
setup(props, { emit }) {
const handleClick = () => {
emit('eventName', '参数值')
}
return { handleClick }
}
}
</script>
```
在父组件中,在子组件上使用`v-on`指令监听子组件触发的事件,并定义一个方法来处理接收到的参数:
```javascript
<template>
<child-component v-on:eventName="handleEvent"></child-component>
</template>
<script>
export default {
methods: {
handleEvent(param) {
// 处理接收到的参数
}
}
}
</script>
```
当子组件中调用`handleClick`方法时,会触发`eventName`事件,并将参数`'参数值'`传递给父组件的`handleEvent`方法。父组件就可以在`handleEvent`方法中处理接收到的参数了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)