Vue3组合式-依赖注入provideinject

一、注意点

   专门强调了是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)

{{message}}   // 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>