vue中的依赖注入

通常情况下，当我们需要从父组件向子组件传递数据时，会使用 props。想象一下这样的结构：有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某个深层的子组件需要一个较远的祖先组件中的部分数据。在这种情况下，如果仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦：

这一问题被称为“prop 逐级透传”，显然是我们希望尽量避免的情况

provide 和 inject 可以帮助我们解决这一问题。 [1] 一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

export default {
    data() {
        return {
            message: "动态传递的值",
        }
    },
    //写法一 如果是固定值
    // provide: {
    //     message: "固定的值"
    // },
    //写法二 动态值
    provide: {
        message() {
            return this.message
        }
//如果写成  message:this.message 控制台会报错
    }
}



//子页面


export default {

    data() {
        return {
            fulmessage: message
        }
    },
    inject: ["message"]
}

除了在组件中提供依赖，还可以在整个应用层提供依赖

那么在任何地方都可以访问到