[vue3新特性] 9.组合api——10.Provide / Inject

之前我们学习过provide和inject的作用，就是在父级组件中provide数据或者方法，在他的后代组件中只要直接inject就可以使用这些数据或者方法了，
这节课我们就一起学习一下在组合API中使用provide和inject，还是以我们之前写的titleBar组件为例

1.基本用法

在父组件中使用provide，需要先导入这个方法

import { provide } from 'vue'

provide这个函数有两个参数

provide(name,value)

第一个参数就是数据或者方法的名字，第二个就是它的值，
我们在App.vue中给后代组件provide一个titleColor，表示标题栏文字的颜色

  setup() {
    provide('titleColor', '#333')
  },

名字是titleColor，它的值是‘#333’
这样在父组件中就完成了provide

下面来修改titleBar组件
inject也是一个方法，我们在titleBar中导入它

import { inject } from 'vue'

然后我们根据父组件中provide的名字获取到它的值，
最后需要在setup中return这个值，以便在template中使用

  setup() {
    const titleColor = inject('titleColor')    // titleColor就是我们在父组件中provide的名字
    return {
      titleColor,
    }
  },

template中使用titleColor

{{ title }}

我们可以看到父组件中provide的颜色值渲染到了div这个元素上

inject这个方法还有第二个参数，表示如果父级组件没有provide相应的数据，那它默认返回的值

inject(name,defaultValue)

现在我们把父组件中provide的titleColor去掉，
在titleBar组件中，inject时增加一个默认值

const titleColor = inject('titleColor', 'red')

这样我们我页面标题就变成了红色

2.增加响应性

现在我们恢复上一步的代码，还是由App.vue来provide titleColor这个数据，
我们现在来provide一个有响应性的值，只需要用ref或者reactive来定义数据就行了
在App.vue中修改

const titleColor = ref('#333')
provide('titleColor', titleColor)

这样titleColor这个数据就有响应性了，
我们在onMounted中，改变它的值

  setup() {
    const titleColor = ref('#333')
    provide('titleColor', titleColor)

    onMounted(() => {
      titleColor.value = 'green'     // 改变了数据titleColor的值
    })
  },

在titleBar中的代码不用修改，还是像以前一样inject titleColor这个数据

  setup() {
    const titleColor = inject('titleColor', 'red')
    return {
      titleColor,
    }
  },

它接收到green这个值，覆盖了它的默认值red，所以最后页面标题的颜色是绿色的

3.子组件如何改变inject的值

如果我们想在子组件中改变父组件provide的titleColor这个值，不可以在子组件中直接修改，因为这样会导致代码逻辑混乱，降低代码的可维护性，我们的原则是子级组件不要去改变父级组件的
这时正确的方式是在父组件中定义一个改变titleColor的方法，然后把这个方法provide给子组件
在App.vue中增加changeTitleColor这个方法

  setup() {
    const titleColor = ref('#333')
    const changeTitleColor = () => {   // 增加改变titleColor的方法
      titleColor.value = 'blue'
    }
    provide('titleColor', titleColor)
    provide('changeTitleColor', changeTitleColor)     // 把这个方法provide给子组件
  },

在子组件中调用changeTitleColor方法

  setup() {
    const titleColor = inject('titleColor', 'red')
    const changeTitleColor = inject('changeTitleColor')   // inject这个方法
    onMounted(() => {
      changeTitleColor()   //在组件挂载以后调用，就可以改变titleColor的值了
    })
    return {
      titleColor,
    }
  },

现在我们的页面标题变成了蓝色

更进一步，为了防止子组件中修改provide的数据，可以在provide时使用readonly
在App.vue中导入readonly这个方法

import { provide, ref, readonly } from 'vue'

在provide数据时，增加readonly

  setup() {
    const titleColor = ref('#333')
    const changeTitleColor = () => {
      titleColor.value = 'blue'
    }
    provide('titleColor', readonly(titleColor))    // 新增
    provide('changeTitleColor', changeTitleColor)
  },

这样子组件中就不能更改titleColor的值了，我们可以更改一下试试，看看会怎么样

  setup() {
    const titleColor = inject('titleColor', 'red')
    titleColor.value = 'blue'  // 更改titleColor，会有警告，而且更改也不会生效
    return {
      titleColor,
    }
  },

这样写时，控制台会输出一个警告

同时更改也不会有效果

这节课内容就到这里，基本都是对provide/inject的一个复习，只是写法不一样了而已。