百度360必应搜狗淘宝本站头条
vue dispatchspring gatewayorder by ascidea eval resetupdate canceled
当前位置：网站首页 > 技术分类 > 正文

vue provide与inject使用详解（vue中provide）

ztj100 2024-11-12 14:21 13 浏览 0 评论

provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

一、简单示例

向子组件注入数据

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>provide / inject</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="js_app">
        <children></children>
    </div>
    <script>
    var Children = {
        inject: ['list'],
        template: '<ul><li v-for="(v,i) in list" :key="i">姓名：{{ v.name }} 分数：{{ v.score }}</li></ul>'
    };
    var app = new Vue({
        el: '#js_app',
        provide: {
            list: [
                { name: 'tom', score: 88 },
                { name: 'jack', score: 75 },
                { name: 'rose', score: 96 }
            ]
        },
        components: {
            children: Children
        }
    });
    </script>
</body>

</html>

二、配合Symbol使用

var symbol = Symbol();
var Children = {
    inject: { // 这里是一个对象，自定义key指定值
        list: symbol
    },
    template: '<ul><li v-for="(v,i) in list" :key="i">姓名：{{ v.name }} 分数：{{ v.score }}</li></ul>'
};
var app = new Vue({
    el: '#js_app',
    provide: function() { // 这里是一个函数，返回一个对象
        return {
            [symbol]: [
                { name: 'tom', score: 88 },
                { name: 'jack', score: 75 },
                { name: 'rose', score: 96 }
            ]
        };
    },
    components: {
        children: Children
    }
});

三、使用默认值

var Children = {
    inject: {
        list: {
            from: 'list',
            default: function() {
                return [
                    { name: 'tom', score: 88 },
                    { name: 'jack', score: 75 },
                    { name: 'rose', score: 96 }
                ];
            }
        }
    },
    template: '<ul><li v-for="(v,i) in list" :key="i">姓名：{{ v.name }} 分数：{{ v.score }}</li></ul>'
};
var app = new Vue({
    el: '#js_app',
    components: {
        children: Children
    }
});

四、配合props使用

var Children = {
    inject: ['list'],
    props: {
        clist: {
            type: Array,
            default: function() {
                return this.list;
            }
        }
    },
    template: '<ul><li v-for="(v,i) in clist" :key="i">姓名：{{ v.name }} 分数：{{ v.score }}</li></ul>'
};
var app = new Vue({
    el: '#js_app',
    provide: function() {
        return {
            list: [
                { name: 'tom', score: 100 },
                { name: 'jack', score: 66 },
                { name: 'rose', score: 85 }
            ]
        };
    },
    components: {
        children: Children
    }
});

相关推荐

再见Swagger UI 国人开源了一款超好用的 API 文档生成框架，真香

背景最近，栈长发现某些国内的开源项目都使用到了Knife4j技术，看名字就觉得很锋利啊！...

Spring Boot自动装配黑魔法:手把手教你打造高逼格自定义Starter

如果你是SpringBoot深度用户，是否经历过这样的痛苦：每个新项目都要重复配置Redis连接池，反复粘贴Swagger配置参数，在微服务架构中为统一日志格式疲于奔命？本文将为你揭开Spring...

Spring Boot(十五):集成Knife4j（spring boot 集成）

Knife4j的简介Knife4j是一个集Swagger2和OpenAPI3为一体的增强解决方案，它的前身是上一篇文章中介绍的swagger-bootstrap-ui。swagger-bootstra...

swagger-bootstrap-ui:swagger改进版本，界面更美观易于阅读

swagger作为一款在线文档生成工具，用于自动生成接口API，避免接口文档和代码不同步，但原生的界面不是很友好，下面介绍一款改进版本swagger-bootstrap-ui，界面左右侧布局，可以打开...

界面美观功能强大，终于可以告别单调的swagger ui了——knife4j

介绍knife4j是为JavaMVC框架集成Swagger生成Api文档的增强解决方案（在非Java项目中也提供了前端UI的增强解决方案），前身是swagger-bootstrap-ui,取名kni...

从 0 到 1 实战 Spring Boot 3:手把手教你构建高效 RESTful 接口

从0到1实战SpringBoot3：手把手教你构建高效RESTful接口在微服务架构盛行的今天，构建高效稳定的RESTful接口是后端开发者的核心技能。SpringBoot凭...

SpringBoot动态权限校验终极指南:3种高赞方案让老板主动加薪!

“上周用这套方案重构权限系统，CTO当着全组的面摔了祖传代码！”一位脉脉匿名网友的血泪经验：还在用硬编码写Shiro过滤器？RBAC模型搞出200张表？是时候用SpringSecurity+动态路...

一个基于 Spring Boot 的在线考试系统

今天推荐一款超级美观的在线考试系统，感兴趣可以先去预览地址看看该项目。在线Demo预览，http://129.211.88.191，账户分别是admin、teacher、student，密码是ad...

SpringBoot API开发的十大专业实践指南

在SpringBoot应用开发领域，构建高效、可靠的API需遵循系统化的开发规范。本文结合实战编码示例，详细解析10项关键开发实践，助您打造具备工业级标准的后端接口。一、RESTful...

震碎认知!将原理融会贯通到顶点的SpringBoot实战项目

SpringBoot是什么？我们知道，从2002年开始，Spring一直在飞速的发展，如今已经成为了在JavaEE（JavaEnterpriseEdition）开发中真正意义上的标准，但...

Spring Boot 整合 Knife4j 实现接口文档编写?

Knife4j增强版的SwaggerUI实现，在Knife4j中提供了很多功能并且用户体验也随之有了很大的提升。Knife4j主要基于Swagger2.0构建的，主要的用途就是在SpringBo...

前端同事老是说swagger不好用，我用了knife4j后，同事爽得不行

日常开发当中，少不了前端联调，随着协同开发的发展，前端对接口要求也变得越来越高了。所以我使用了knife4j，同事用完觉得太舒服了。knife4j简介：Knife4j...

一个基于spring boot的Java开源商城系统

前言一个基于springboot的JAVA开源商城系统，是前后端分离、为生产环境多实例完全准备、数据库为b2b2c商城系统设计、拥有完整下单流程和精美设计的java开源商城系统https://www...

再见 Swagger!国人开源了一款超好用的 API 文档生成框架真香

Knife4j是为JavaMVC框架集成Swagger生成Api文档的增强解决方案,前身是swagger-bootstrap-ui,取名kni4j是希望她能像一把匕首一样小巧,轻量,并且功能强悍!...

Spring Boot整合MybatisPlus和Druid

在Java中，我比较ORM熟悉的只有...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.