vue3 provide和inject传值父子，父孙，儿子和孙子之间相互传值以及修改，相互响应式的修改数据

1 祖传孙

父组件 这里的car 不能写car.value,不然就不是响应式的

<script setup>
import { ref, provide } from 'vue'
import appCHILD1 from './appChild1.vue'
let car = ref('法拉利跑车')
provide('setCar', car)
</script>

<template>
  <h1>父孙组件之间传值</h1>
  <h1>父亲和儿子，父亲和孙子，儿子和孙子之间相互传值</h1>
  <h1>相互之间修改值，实时生效，动态绑定的</h1>
  <h2>爷爷的车：{
  { car }}</h2>
  <appCHILD1></appCHILD1>
</template>
<style scoped></style>

子组件

<script setup>
import appChild2 from './appChild2.vue'
import { inject } from 'vue'
let car = inject('setCar')

const click = () => {
  car.value = '比亚迪'
}
</script>

<template>
  <h2>父亲的车：{
  { car }}</h2>
  <el-button type="primary" @click="click">儿子修改车</e