vue小知识~注入provide！

waywordcode

于 2021-07-04 22:38:27 发布

阅读量408

点赞数

分类专栏： vue文章文章标签： vue

本文链接：https://blog.csdn.net/qq_31539817/article/details/118468838

版权

vue文章专栏收录该内容

11 篇文章

订阅专栏

本文介绍了Vue中祖先组件如何通过provide向后代组件注入值，以及后代组件如何使用inject来消费这些注入的属性和方法。提供了一个示例，展示了如何在祖先组件中定义和在后代组件中使用注入的属性，提醒开发者虽然可用但不推荐在项目中频繁使用此特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注入表示的是将该组件的相关值，方法，实例向后代组件注入。

祖先元素中定义注入：

export default {
provide() {
        return { provideName: provideValue };
    },
}

还可以是一个对象：

export default {
provide{
        provideName: provideValue
    },
}

例如：

export default {
    data() {
        return {
            munbers: 10000,'
        };
    },
    provide() {
        return { munbers: this.munbers };
    },

后代组件中使用inject消费，inject是一个数组也可以是一个对象，和props类型

inject: ['provideName'],

例如：

inject: ['munbers'],

在后代组件就会有munbers这个属性了，通过this就可以访问。

vue小知识~注入provide！

警告：项目不推荐使用，组件封装可以考虑使用！！！