vue中的provide和inject

阅读element-ui源码，发现在设计子组时件用到了inject属性，随即查了一下官方文档，得知vue在2.2.0版本里新增了provide / inject： provide 和 inject 主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中。 Vue.js官方文档 按照文档的描述，我的理解是：在多级嵌套的组件体系中，某级外层组件可以通过provide属性向其下任意一级子组件提供一个依赖，不管层级有多深；而某级子组件则可以通过inject属性接收来自其上任意一级父组件提供的依赖（通过this.xxx形式获取）。注意：provide和inject需要一起使用。 举个例子说明： 清朝三位皇帝：康熙（玄烨）、雍正（胤禛）、乾隆（弘历）是祖孙三代，我们用vue组件的思想表示他们之间的关系，并模拟他们的一段对话，以此理解vue中的provide和inject。 调用组件——大清帝国：qing-dynasty.vue 定义爷爷组件——康熙皇帝：kangxi.vue 定义儿子组件——雍正皇帝：yongzheng.vue // 打印结果 康熙皇帝对雍正皇帝说："你是我儿子" 雍正皇帝回答："是的，爸爸" 定义孙子组件——乾隆：qianlong.vue // 打印结果 康熙皇帝对乾隆皇帝说："你是我孙子" 乾隆皇帝回答："是的，爷爷" 雍正皇帝对乾隆皇帝说："你是我儿子" 乾隆皇帝回答："是的，爸爸"

本文章由javascript技术分享原创和收集