vue3组件通信之provide与inject

provide[提供]

inject[注入]

vue3提供两个方法provide与inject,可以实现隔辈组件传递参数

组件与组件提供数据:
provide方法用于提供数据，此方法执需要传递两个参数,分别提供数据的key与提供数据value

祖辈组件代码：

<template>
  <div class="box">
    <h1>Provide与Inject{{car}}</h1>
    <hr />
    <Child></Child>
  </div>
</template>

<script setup lang="ts">
import Child from "./Child.vue";
//vue3提供provide(提供)与inject(注入),可以实现隔辈组件传递数据
import { ref, provide } from "vue";
let car = ref("法拉利");
//祖先组件给后代组件提供数据
//两个参数:第一个参数就是提供的数据key
//第二个参数:祖先组件提供数据
provide("TOKEN", car);
</script>

儿子组件如下：

<template>
  <div class="child">
     <h1>我是儿子组件</h1>
     <Child></Child>
  </div>
</template>

<script setup lang="ts">
import Child from './GrandChild.vue';
</script>

孙子组件如下：

<template>
  <div class="child1">
    <h1>孙子组件</h1>
    <p>{{car}}</p>
    <button @click="updateCar">更新数据</button>
  </div>
</template>
<script setup lang="ts">
import {inject} from 'vue';
//注入祖先组件提供数据
//需要参数:即为祖先提供数据的key
let car = inject('TOKEN');
console.log(car);  //法拉利
const updateCar = ()=>{
   car.value  = '自行车';
}
</script>

后代组件可以通过inject方法获取数据,通过key获取存储的数值