Vue3组合式-依赖注入provide&&inject

一、注意点

   专门强调了是3.0且是组合式，不是2.0不支持也不是选项式不支持provide&&inject，是支持但是有很明显的弊端，不建议使用

二、场景

官方的解释: 通常情况下，当我们需要从父组件向子组件传递数据时，会使用props，想象一下这样的结构，有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某一个深层的子组件需要一个较远的祖先组件中的部分数据，在这种情况下，如果仅使用props则必须将其沿着组件链逐级传递下去，这会非常麻烦，provide(供给)和reject(注入)可以帮助我们解决这个问题。

简单来说:  后代组件，无论是多后代的组件，想使用祖先的数据，可以不用一级一级的传递数据，只需要在祖先组件使用provide以及需要使用这个数据的后代组件reject注入即可。

三、普通注入

先说一下组件结构: APP.vue - parentView.vue - childView.vue

【parentView.vue中的内容不在写出来，就是单纯的引入childView.vue组件】

APP.vue

import { ref, provide } from "vue"
imort ParentView from "./parentView.vue"

const message = ref("1111")
provide("message", message)

<input />
<ParentView />

childView.vue

import { inject } from "vue"

// 1、正常获取供给值
const meassageEnd = inject("message")

// 2、添加默认值，防止供给值不存在报警告
const messageEnd = inject("message", "2222")

// 3、添加默认值，防止供给值不存在报警告，通过函数或者初始值设定
const messageEnd = inject("message", ()=>{
    return "0000"
}, true)

{{messageEnd}}   // input的值更改的时候这里会同步响应

四、注入方组件中更改数据

APP.vue

import  { ref, provide } from "vue"
import ParentView from "./parentView.vue"

const message = ref("1111")
const clickFun = () => {
    message.value="new value"
}

provide("messageAccept", {
    message,
    clickFun
})

<input v-model="message" />
<ParentView>

childView.vue

import { inject } from "vue"
const { mssage, clickFun } = inject("messageAccept")

{{message}}
<div @click="clickFun"></div>