vue3 script setup 中 父组件 响应子组件事件 通过 provide inject 写法实现
时间: 2024-05-12 14:21:12 浏览: 25
在 Vue3 中,可以使用 `provide` 和 `inject` 来实现父组件响应子组件事件的功能。
首先,在父组件中,使用 `provide` 方法将需要响应子组件事件的函数传递给子组件:
```vue
<template>
<div>
<child-component :on-click="handleClick"></child-component>
</div>
</template>
<script>
import { defineComponent, provide } from 'vue';
import ChildComponent from './ChildComponent.vue';
export default defineComponent({
components: { ChildComponent },
setup() {
const handleClick = (event) => {
console.log('clicked', event);
};
provide('handleClick', handleClick);
return {};
},
});
</script>
```
在子组件中,使用 `inject` 方法获取并执行父组件提供的函数:
```vue
<template>
<button @click="handleClick">Click me</button>
</template>
<script>
import { defineComponent, inject } from 'vue';
export default defineComponent({
props: {
onClick: Function,
},
setup() {
const handleClick = () => {
const onClick = inject('handleClick');
onClick('child clicked');
};
return { handleClick };
},
});
</script>
```
在子组件中,使用 `inject` 方法获取父组件提供的函数,并在点击事件中执行该函数。在父组件中,使用 `provide` 方法将函数传递给子组件,并使用一个字符串作为键名,以便子组件可以使用 `inject` 方法获取该函数。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)