十、provide 与 inject

官方文档

Provide/Inject API With Vue 3

（一）作用

• 实现 祖与后代组件间 通信

（二）原理

• 父组件有一个 provide 选项来提供数据
• 子组件有一个 inject 选项来开始使用这些数据

（三）具体写法

1.祖组件中

setup() {
  ......
  let car = reactive({
    name: '奔驰',
    price: '40W'
  });
  provide('car', car);
  ......
}

• 语法糖中需要 provide 计算属性才能维持数据的响应性

<script setup>
  provide(
    "car",
    computed(() => car),
  );
</script>

2.后代组件中

setup(props, context) {
  ......
  const car = inject('car');
  return {
    car,
  }
}