526互联

vue3中 provide 、 inject的用法（二）

发布时间 2024-01-12 10:03:02作者: gaomingqiang

provide 、 inject 一般用来实现跨组件通信，避免层层传参，操作繁琐的问题。

provide( 属性,属性值 )：里面包含了要给子孙后代传递的东西也可以是一个操作自己某个功能的方法。

inject(接收的属性名,default)：default指的是默认值。

以下我是用对父组件进行刷新的方法来对provide 、 inject进行举例： 

父组件：

复制代码
<template>
    <router-view v-if="isRouterView"></router-view>
</template>

<script lang="ts" setup>
import { ref, provide, nextTick } from "vue";
const isRouterView = ref(true);
//父组件刷新方法
const reload = () => {
  isRouterView.value = false;
  nextTick(() => {
    isRouterView.value = true;
  })
}
//provide进行注册
provide('reload', reload);
</script>
复制代码

之后子子孙孙组件操作：

复制代码
<script lang="ts" setup>
//子孙组件引入inject
import { ref,inject } from "vue";


const reload = inject("reload");

//调用方法使用
const handleClick = (val: any) => {
   if (typeof reload == "function") reload();
};
</script >
复制代码