【6月日新计划更文活动】第25天

provide与inject

• 作用：实现祖与后代组件组件间通信(跨级组件)

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

• 具体写法

  1. 祖组件中：

      import { provide } from 'vue'
      setup() {
        const car = reactive({ name: 'Car', price: '40W' })
        provide('car', car) // 给自己的后代组件传递数据
     
        return {
          ...toRefs(car)
        }
      }
     

  2. 孙组件中：

     import { inject } from 'vue'
     setup() {
        const car = inject('car') // inject 接收
        console.log('打印car', car)
     
        return {
          car
        }
      }