vue3 setup通过h函数如何让子组件回传参数给父组件
时间: 2024-05-08 18:16:39 浏览: 86
vue 父组件中调用子组件函数的方法
5星 · 资源好评率100%
在Vue3中,可以使用`setup`函数中的`h`函数来创建子组件,并通过`emit`方法来回传参数给父组件。
首先,在父组件中,需要定义一个方法来接收子组件传回的参数:
```javascript
<template>
<div>
<ChildComponent @childEvent="handleChildEvent" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
handleChildEvent(value) {
console.log('Received value from child:', value)
}
}
}
</script>
```
然后,在子组件中,需要使用`emit`方法来触发`childEvent`事件,并将参数传递给父组件:
```javascript
<script>
export default {
setup(props, { emit }) {
const handleClick = () => {
const value = 'Hello world!'
emit('childEvent', value)
}
return {
handleClick
}
}
}
</script>
```
最后,在父组件中,通过`@childEvent`监听子组件触发的事件,并在`handleChildEvent`方法中接收传回的参数。这样就可以让子组件回传参数给父组件了。
阅读全文