依赖注入provide和inject

依赖注入

1. provide() 和 inject() 可以实现嵌套组件之间的数据传递
2. 两个函数只能在 setup() 函数中使用
3. 父组件中使用 provide() 函数向下传递数据
4. 子组件中使用 inject() 函数获取上层传递过来的数据

共享普通数据

// 父组件
import { provide } from '@vue/composition-api'
export default {
      name: 'app',
      setup() {
            // 2. 父组件，通过 provide 函数向子组件共享数据(不限层级)
            // provide("要共享的数据名称", 被共享的数据)
            provide('globalColor', 'red')
      }
}

// 子组件
import { inject } from '@vue/composition-api'
export default {
      setup() {      
            // 通过指定的数据名称，获取到父级共享的数据
            const themeColor = inject("globalColor")
            return { themeColor }
      }
}

共享响应式数据

可以使用 ref 来保证 provide 和 inject 之间值的响应

// 提供者
const themeRef = ref('dark')
provide(‘ThemeSymbol’, themeRef)

// 使用者
const theme = inject(‘ThemeSymbol’)
watchEffect(() => {
      console.log(`${ theme.value }`)
})