之前我们学习过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
<div class="title" :style="{ color: titleColor }">{{ title }}</div>
我们可以看到父组件中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的一个复习，只是写法不一样了而已。
