深入vue3 之 provide / inject

• 前言：本文章写的是composition api，options api的查看底部链接

---

• 应用API的 provide
  • 作用范围：实例内的所有组件
• 组件上下级关系的 provide
  • 父级组件声明的 provide，所有子孙组件皆可拿到；
    • 声明 provide 的组件该同级和父级无法 inject 获取到
• 关联链上 provide 声明的同名内容
  • 采取就近原则，最近一级父级有就引用最近一级的，没有就接着往上找，直到根实例的 provide 声明 

---

父组件：

<script lang='ts' setup>
import { provide,ref,rective } from 'vue'
let year = ref(2020)
let book = rective({title:'命运石之门'})
provide('year',year)
provide('yearValue',year.value) // 子组件inject('yearValue') ，获取到的是静态的，子组件不会获取到最新数据
provide('book',book)
provide('changeFn',changeFn) // 有时候可能需要在子组件修改响应式的数据，此时provide一个方法给子组件调用
setTimeout(()=>{
  year.value = 2022
},1000*2)
function changeFn (){
  book.title = '弧光计划'
  year.value = 2036
}
</script>

子组件：

<template>
  <div>{{year}}</div>
  <div>{{yearValue}}</div>
  <div>{{book.title}}</div>
  <button @click='changeFn'>命运探知</button>
</template>
<script lang='ts' setup>
import { inject } from 'vue'
// 讲解1
interface Book {
  title: string
}
let year = inject('year')
let yearValue = inject('yearValue') // 如上所述，一直都是不变的数据
let book = inject<Book>('book')
let changeFn:()=>void = inject('changeFn')


// 讲解2
// 即使在子组件可以直接修改，但最好不要这么做，将会影响到provide的父组件以及其他所有inject的子组件。
// 这会导致 溯源 非常麻烦，所以修改方式统一为在父组件provide一个方法，子组件调用进行修改！
// book.title = '不要这么做'


// 讲解3
// 无默认值的injcet :当任意父级没有声明时，则为 undefined
let static = inject('static') // undefined

// 有默认值的injcet :当任意父级没有声明时，则使用默认值
let static2 = inject('static2','????') // ????

// 默认值是函数的injcet :当任意父级没有声明时，则使用函数return的值
let defaultFn = inject('ab12',()=>'雏见泽'+'棉流',true) // 固定为 true
console.log(defaultFn) // '雏见泽棉流'

</script>

---

 其他更多vue3 选项式api、组合式api、全局/应用api学习经验分享

vue3 学习资料vue3学习资料记录，经验交流、分享https://oumae-kumiko.github.io/vue3.cn.community/