vue中的provide/inject的学习

前言

最近在看element-ui的源码，发现了一个这样的属性:inject.遂查看官网provider/inject

provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。

需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。

下面我们来验证下猜想：

first：定义一个parent component

<template><div>
<childOne></childOne></div>
</template><script>import childOne from '../components/test/ChildOne'export default {name: "Parent",provide: {for: "demo"},components:{childOne}}

在这里我们在父组件中provide for这个变量。

second 定义一个子组件

<template><div>{{demo}}<childtwo></childtwo></div>
</template><script>import childtwo from './ChildTwo'export default {name: "childOne",inject: ['for'],data() {return {demo: this.for}},components: {childtwo}}
</script>

third 定义另一个子组件

<template><div>{{demo}}</div>
</template><script>export default {name: "",inject: ['for'],data() {return {demo: this.for}}}
</script>

在2个子组件中我们使用jnject注入了provide提供的变量for，并将它提供给了data属性。

这里官网注明例子只工作在 Vue 2.2.1 或更高版本。低于这个版本时，注入的值会在 props 和 data 初始化之后得到。

运行之后看下结果

从上面这个例子可以看出，只要在父组件中调用了，那么在这个父组件生效的生命周期内，所有的子组件都可以调用inject来注入父组件中的值。

vue中的provide/inject的学习相关推荐

vue中的provide/inject的学习使用
irst:定义一个parent component ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <template> <div> ...
vue新特性provide/inject深入学习
阅读本文帮你你可以在使用provide/inject传递响应式数据时记住一个特性: provide传递的每一个响应式数据都需要值是一个引用不变的可监听对象. 在开发vue项目时,不可避免的需要进行组件 ...
vue3中的provide/inject(提供/注入)
vue3中的provide/inject(提供注入) 在说provide/inject先说一下prop逐级穿透问题. 通常我们从父组件向子组件传递数据时,会用到props.对于只需要传递一层或二层时还 ...
Vue3+TS 中使用Provide/Inject 的例子
详见:Provide / Inject | Vue.js (vuejs.org) 作用:在深度嵌套的组件中,将 prop 沿着组件链逐级传递会很麻烦.使用 Provide/Inject可以直接将父组件 ...
【Vue】采用provide/inject方式刷新当前页面
1.场景在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.rel ...
vue组件通信provide/inject
组件通信 provide/inject 一对使用父组件通过provide提供数据子组件通过inject注入值非响应式,可通过对象内属性的方式进行修改解决深层次组件通信举例: 在app组件下引 ...
vue中使用proved inject 实现实时数据
provide () { //父组件中通过provide来提供变量,在子组件中通过inject来注入变量. return {reload: this.reload }}, // 子组件注册 injec ...
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的学习

前言

vue中的provide/inject的学习相关推荐

最新文章

热门文章