您现在的位置是：首页 >其他 >17.provide.inject.下网站首页其他

学习要点：
1.provide.inject
本节课我们来要了解一下 Vue3.x 中的 provide.inject(提供.注入)功能；
一．provide.inject
1. 使用 Composition API，也是使用 import 导入来实现的；
// App.vue
import { ref, provide } from 'vue'
setup() {
provide('title', 'Vue3.x')
}
// Child.vue
import { inject } from 'vue'
const title = inject('title')
return {
title
}
PS：如果需要实现响应式，那也非常简单，直接使用 ref 包含住即可；
const title = ref('Vue3.x')
provide('title', title)
setTimeout(() => {
title.value = 'Vue4.x'
}, 1000)
2. 如果要修改响应式的值，那该如何操作呢？
// App.vue
const updateTitle = () => {
title.value = 'Vue5.x'
}
provide('updateTitle', updateTitle)
// Child.vue
<button @click="updateTitle">updateTitle+</button>
const updateTitle = inject('updateTitle')
PS：建议修改值都在提供方修改，也就是这里的 App.vue，提高阅读和维护；
3. 为了避免子组件去更改父组件的 provide 属性，可以在提供时设置只读；
provide('title', readonly(title))