vue中的provide/inject的学习

来源：懂视网责编：小采时间：2020-11-27 19:57:26

vue中的provide/inject的学习

vue中的provide/inject的学习:本次的文章给大家分享了关于vue中的provide/inject的学习，希望可以帮助到有需要的朋友前言最近在看element-ui的源码，发现了一个这样的属性:inject.遂查看官网provider/injectprovider/inject：简单的来说就是在父组件中通过provider来提供变量，

推荐度：

点击下载本文 文档为doc格式

导读vue中的provide/inject的学习:本次的文章给大家分享了关于vue中的provide/inject的学习，希望可以帮助到有需要的朋友前言最近在看element-ui的源码，发现了一个这样的属性:inject.遂查看官网provider/injectprovider/inject：简单的来说就是在父组件中通过provider来提供变量，

下面我们来验证下猜想：

first：定义一个parent component

<template>
 <p>
<childOne></childOne>
 </p>
</template>

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

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

second 定义一个子组件

<template>
 <p>
 {{demo}}
 <childtwo></childtwo>
 </p>
</template>

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

third 定义另一个子组件

<template>
 <p>
 {{demo}}
 </p>
</template>

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

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

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

运行之后看下结果