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

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

ztj100 2024-11-12 14:21 35 浏览 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
    }
});

相关推荐

Vue3非兼容变更——函数式组件（vue 兼容）

在Vue2.X中，函数式组件有两个主要应用场景：作为性能优化，因为它们的初始化速度比有状态组件快得多；返回多个根节点。然而在Vue3.X中，有状态组件的性能已经提高到可以忽略不计的程度。此外，有状态组...

利用vue.js进行组件化开发，一学就会(一)

组件原理/组成组件（Component）扩展HTML元素，封装可重用的代码，核心目标是为了可重用性高，减少重复性的开发。组件预先定义好行为的ViewModel类。代码按照template\styl...

Vue3 新趋势:10 个最强 X 操作!（vue.3）

Vue3为前端开发带来了诸多革新，它不仅提升了性能，还提供了...

总结 Vue3 组件管理 12 种高级写法，灵活使用才能提高效率

SFC单文件组件顾名思义，就是一个.vue文件只写一个组件...

前端流行框架Vue3教程:17. _组件数据传递

_组件数据传递我们之前讲解过了组件之间的数据传递，...

前端流行框架Vue3教程:14. 组件传递Props效验

组件传递Props效验Vue组件可以更细致地声明对传入的props的校验要求...

前端流行框架Vue3教程:25. 组件保持存活

25.组件保持存活当使用...

5 个被低估的 Vue3 实战技巧，让你的项目性能提升 300%?

前端圈最近都在卷性能优化和工程化，你还在用老一套的Vue3开发方法？作为摸爬滚打多年的老前端，今天就把私藏的几个Vue3实战技巧分享出来，帮你在开发效率、代码质量和项目性能上实现弯道超车！一、...

绝望!Vue3 组件频繁崩溃?7 个硬核技巧让性能暴涨 400%!

前端的兄弟姐妹们五一假期快乐，谁还没在Vue3项目上栽过跟头？满心欢喜写好的组件，一到实际场景就频频崩溃，页面加载慢得像蜗牛，操作卡顿到让人想砸电脑。用户疯狂吐槽，领导脸色难看，自己改代码改到怀疑...

前端流行框架Vue3教程:15. 组件事件

组件事件在组件的模板表达式中，可以直接使用...

Vue3，看这篇就够了（vue3 从入门到实战）

一、前言最近很多技术网站，讨论的最多的无非就是Vue3了，大多数都是CompositionAPI和基于Proxy的原理分析。但是今天想着跟大家聊聊，Vue3对于一个低代码平台的前端更深层次意味着什么...

前端流行框架Vue3教程:24.动态组件

24.动态组件有些场景会需要在两个组件间来回切换，比如Tab界面...

前端流行框架Vue3教程:12. 组件的注册方式

组件的注册方式一个Vue组件在使用前需要先被“注册”，这样Vue才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册...

焦虑!Vue3 组件频繁假死?6 个奇招让页面流畅度狂飙 500%!

前端圈的朋友们，谁还没在Vue3项目上踩过性能的坑？满心期待开发出的组件，一到高并发场景就频繁假死，用户反馈页面点不动，产品经理追着问进度，自己调试到心态炸裂！别以为这是个例，不少人在电商大促、数...

前端流行框架Vue3教程:26. 异步组件

根据上节课的代码，我们在切换到B组件的时候，发现并没有网络请求：异步组件：...

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

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