原文网址：Vue--provide, inject--使用/教程/实例_IT利刃出鞘的博客-CSDN博客

简介

说明

本文用示例介绍Vue中的provide和inject的用法。

官网

Provide / Inject | Vue.js

API — Vue.js

provide和inject的简介

说明

通过provide与inject，可以把父组件的数据和方法传递给其所有子孙后代。

这种传递是可以跨级的。比如：父组件可以把数据传递给孙组件。

父组件中通过provider来提供变量，然后在子孙组件中通过inject来注入变量。

官方文档中有这么一句话

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

使用场景

provide 和 inject 主要在开发高阶插件/组件库时使用，不推荐在应用程序中使用。

优点

解决了组件层级过多时，数据传递麻烦的问题

缺点

数据追踪困难：不确定数据注入层以及数据使用层。

用法

provide
- 一个对象，或者是一个返回对象的函数。
- 对象内包含想要传递的内容，即属性和属性值
  - 注意：子孙层的 provide 会覆盖父辈 provide 中相同key的属性值
inject
- 字符串数组，或者一个对象。
- 属性值可以为对象，包含from,default属性
from
- 可用注入内容中的key值，即 provide 传入对象中的key
default
- 默认值，取值不成功时候的备选。

代码执行顺序

data
provide
created
1. 在这个阶段$el还未生成，在这先处理privide的逻辑，子孙组件才可以取到inject值
mounted

示例：不支持响应

provide 和 inject这种绑定不是动态响应的。即：父组件数据改变后子孙组件的数据不会改变。

代码

Parent.vue（父组件（顶层组件））

<template><div class="outer"><h3>父组件</h3>名字：<input v-model="name">年龄：<input v-model.number="age" type="number"><child></child></div>
</template><script>import Child from "./Child";
export default {name: 'Parent',components: {Child},data() {return {name: 'Tony',age: 20,}},provide() {return {name: this.name,age: this.age}}
}
</script><style scoped>
.outer {margin: 20px;border: 2px solid red;padding: 20px;
}
</style>

Child.vue（子组件（中间组件））

<template><div class="outer"><h3>子组件</h3><div>获得顶层组件的name：{{ name }}</div><div>获得顶层组件的age：{{ age }}</div><grand-child></grand-child></div>
</template><script>import GrandChild from "./GrandChild";
export default {components: {GrandChild},inject: ['name', 'age'],// 详细写法// inject:{             // 详细指定来源以及默认值//   param1:{//     from:'Parent',   //表示从组件Parent传递过来的//     default:'a default msg'//   },//   reload:{//     from:'Parent'//   }// }
}
</script><style scoped>
.outer {margin: 20px;border: 2px solid blue;padding: 20px;
}
</style>

GrandChild.vue（孙组件（最底层组件））

<template><div class="outer"><h3>孙组件</h3><div>获得顶层组件的name：{{ name }}</div><div>获得顶层组件的age：{{ age }}</div></div>
</template>
<script>
export default {name: "GrandChild",inject: ['name', 'age'],// 详细写法// inject:{             // 详细指定来源以及默认值//   param1:{//     from:'Parent',   //表示从组件Parent传递过来的//     default:'a default msg'//   },//   reload:{//     from:'Parent'//   }// },}
</script><style scoped>
.outer {margin: 20px;border: 2px solid green;padding: 20px;
}
</style>

路由（store/index.js）

import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";Vue.use(Router)export default new Router({routes: [{path: '/parent',name: 'Parent',component: Parent,}],
})

测试

测试1：访问

访问：http://localhost:8080/#/parent

可以看到：子组件和孙组件都能获得父组件的值。

测试2：修改父组件数据

示例：支持响应

provide 和 inject这种绑定不是动态响应的。

实现动态响应的方案是：将一个函数赋值给provide的一个值，这个函数返回父组件的动态数据，然后在子孙组件里面调用这个函数。

代码

Parent.vue（父组件（顶层组件））

<template><div class="outer"><h3>父组件</h3>名字：<input v-model="name">年龄：<input v-model.number="age" type="number"><child></child></div>
</template><script>import Child from "./Child";
export default {name: 'Parent',components: {Child},data() {return {name: 'Tony',age: 20,}},provide() {return {name: this.name,age: () => this.age //这里传入的是一个function}}
}
</script><style scoped>
.outer {margin: 20px;border: 2px solid red;padding: 20px;
}
</style>

Child.vue（子组件（中间组件））

<template><div class="outer"><h3>子组件</h3><div>获得顶层组件的name：{{ name }}</div><!--这里改为了使用函数来获得值--><div>获得顶层组件的age：{{ age() }}</div><grand-child></grand-child></div>
</template><script>import GrandChild from "./GrandChild";
export default {components: {GrandChild},inject: ['name', 'age'],// 详细写法// inject:{             // 详细指定来源以及默认值//   param1:{//     from:'Parent',   //表示从组件Parent传递过来的//     default:'a default msg'//   },//   reload:{//     from:'Parent'//   }// },
}
</script><style scoped>
.outer {margin: 20px;border: 2px solid blue;padding: 20px;
}
</style>

GrandChild.vue（孙组件（最底层组件））

<template><div class="outer"><h3>孙组件</h3><div>获得顶层组件的name：{{ name }}</div><!--这里改为了使用函数来获得值--><div>获得顶层组件的age：{{ age() }}</div></div>
</template>
<script>
export default {name: "GrandChild",inject: ['name', 'age'],// 详细写法// inject:{             // 详细指定来源以及默认值//   param1:{//     from:'Parent',   //表示从组件Parent传递过来的//     default:'a default msg'//   },//   reload:{//     from:'Parent'//   }// }
}
</script><style scoped>
.outer {margin: 20px;border: 2px solid green;padding: 20px;
}
</style>

路由（store/index.js）

import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";Vue.use(Router)export default new Router({routes: [{path: '/parent',name: 'Parent',component: Parent,}],
})

测试

测试1：访问

访问：http://localhost:8080/#/parent

测试2：修改父组件数据

可以看到：

名字（name）没有动态更新。因为没用函数
年龄（age）动态更新。因为用了函数

Vue--provide, inject--使用/教程/实例相关推荐

vue provide / inject 实现组件数据的实时响应
实现的基础语法: 数据提供 code -- provide () {return {getPropsData: () => { return this.propsData }} }, props ...
vue 组件传值$attrs $listeners $bus provide/inject $parent/$children
$attrs 包含了父作用域中不作为prop被识别的特性绑定,当一个组件没有声明props时,这里会包含所有父作用域的绑定, $listeneers 包含了父作用域中的v-on事件监听器,它可以通过v ...
Vue 组件化通信 provide inject ,dispatch ,boardcast
入门作为前端最容易上手的框架,Vue入门其实没啥说的,我放一段清单的代码,大家能看懂就说明能上手了 <template><div id="app">< ...
【vue】— provide/inject的原理
系列文章目录 [VUE]- diff算法原理 [VUE]- watch侦听器原理文章目录系列文章目录一.provide/inject的作用及使用方式二.顺道复习一下组件间的通讯方式吧三.源码 ...
vue跨组件之间传值Provide/Inject
官网传送门:inject Vue2.2.0+ # 背景关于Vue组件的通讯方式相信大家能倒背如流父子组件:通过prop,$emit,[$root,$parent,$children] 非父子 ...
Vue组件通讯方式 provide/inject 介绍以及使用场景
文章目录 vue的通讯方式 provide / inject的缺点使用办法代码案例展示一(provide字符串) 代码案例展示二(provide返回一个方法,并且方法返回字符串) vue的通讯方式 ...
vue新特性provide/inject深入学习
阅读本文帮你你可以在使用provide/inject传递响应式数据时记住一个特性: provide传递的每一个响应式数据都需要值是一个引用不变的可监听对象. 在开发vue项目时,不可避免的需要进行组件 ...
vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
vue 中provide的用法_Vue多级组件provide/inject使用详解
这次给大家带来Vue多级组件provide/inject使用详解,Vue多级组件provide/inject使用的注意事项有哪些,下面就是实战案例,一起来看一下. provide / inject 是 ...
vue使用provide / inject 组合刷新页面+单独组件刷新
原文链接:https://www.cnblogs.com/leng12/p/xiaoleng.html 一.this.$router.go(0) 相当于F5刷新,这种方法虽然代码很少,只有一行,但是体 ...

Vue--provide, inject--使用/教程/实例

简介

provide和inject的简介

示例：不支持响应

代码

测试

示例：支持响应

代码

测试

Vue--provide, inject--使用/教程/实例相关推荐

最新文章

热门文章