Vue3 ts 组件传递数据给后代 provide inject

一、优点

给后代组件传递数据，且不打扰其它组件

父组件提供provide，后代组件注入inject

二、使用

1、父组件提供数据

注意：提供ref数据，不要带.value，带了就变成普通数据，不是响应式数据

provide('name', {xx1, xx2})

<template>
<Child2></Child2>
<div>资产：{{ money }}</div>

</template>

<script setup lang="ts" name="App">
import { provide, ref } from 'vue';
import Child2 from './components/Child2.vue';
let money = ref(-2000)
// ref 不要带.value，带了数据没有响应式
provide("money", money)
</script>

2、后代组件注入数据(操作数据)

注意：后代组件需要定义变量接收数据

<template>
  <div>子组件</div>
  <div>祖先的钱：{{ money }}</div>
  <button @click="changeMoney">修改祖先的钱</button>
</template>

<script setup lang="ts" name="Child2">
import { inject } from 'vue';

let money = inject("money")
function changeMoney(){
    money.value += 1
}