深究vue3中provide与inject

前言
provide和inject在Vue 2中已经被广泛应用，不是新鲜API，3.0重新认识一下它们两个。

一句话介绍：provide可以向所有子孙组件提供数据以及提供修改数据的方法，子孙组件用inject使用数据。

在组合式API中的用法
基本用法
似乎，组合式API的provide没有提供批量方法， 只能每个变量写一句。

顶级组件：
核心代码：

<script>
import { reactive, provide } from 'vue'
import Child from './divChild'
export default {
  name: 'Father',
  components: {
    Child
  },
  setup () {
    let car = reactive({
      name: 'benchi',
      price: 300000
    })
    provide('car', car)
    return {
      car
    }
  }
}
</script>

顶级组件的全部代码

<template>
  <div class="Father">
    <h1>Father</h1>
    <div>
      <div>name: {{ car.name }}</div>
      <div>price: {{ car.price }}</div>
    </div>
    <Child></Child>
  </div>
</template>
<script>
import { reactive, provide } from 'vue'
import Child from './divChild'
export default {
  name: 'Father',
  components: {
    Child
  },
  setup () {
    let car = reactive({
      name: 'benchi',
      price: 300000
    })
    provide('car', car)
    return {
      car
    }
  }
}
</script>
<style scoped>
.Father {
  height: 30px;
  padding: 10px;
  background-color: red;
}
</style>

后代组件

核心代码

<script>
import { inject }  from 'vue'
export default {
  name: 'son',
  setup () {
    let x1 = inject('car')
    console.log("x111=====", x1)
    return {
      x1
    }
  }
}
</script>

全部代码

<template>
  <div class="Son">
    <h1>son</h1>
  </div>
</template>
<script>
import { inject }  from 'vue'
export default {
  name: 'son',
  setup () {
    let x1 = inject('car')
    console.log("x111=====", x1)
    return {
      x1
    }
  }
}
</script>
<style scoped>
</style>

本篇结束