vue中的provide/inject的學(xué)習(xí)使用

更新時(shí)間：2018年05月09日 09:30:26 作者：櫻花落

本篇文章主要介紹了vue中的provide/inject的學(xué)習(xí)使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

前言

最近在看element-ui的源碼，發(fā)現(xiàn)了一個(gè)這樣的屬性:inject.遂查看官網(wǎng)provider/inject

provider/inject：簡(jiǎn)單的來說就是在父組件中通過provider來提供變量，然后在子組件中通過inject來注入變量。

需要注意的是這里不論子組件有多深，只要調(diào)用了inject那么就可以注入provider中的數(shù)據(jù)。而不是局限于只能從當(dāng)前父組件的prop屬性來獲取數(shù)據(jù)。

下面我們來驗(yàn)證下猜想：

first：定義一個(gè)parent component

<template>
 <div>
<childOne></childOne>
 </div>
</template>

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

在這里我們?cè)诟附M件中provide for這個(gè)變量。

second 定義一個(gè)子組件

<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 定義另一個(gè)子組件

<template>
 <div>
  {{demo}}
 </div>
</template>

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

在2個(gè)子組件中我們使用jnject注入了provide提供的變量for，并將它提供給了data屬性。

這里官網(wǎng)注明例子只工作在 Vue 2.2.1 或更高版本。低于這個(gè)版本時(shí)，注入的值會(huì)在 props 和 data 初始化之后得到。

運(yùn)行之后看下結(jié)果

從上面這個(gè)例子可以看出，只要在父組件中調(diào)用了，那么在這個(gè)父組件生效的生命周期內(nèi)，所有的子組件都可以調(diào)用inject來注入父組件中的值。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue cli 引入第三方JS和CSS的常用方法分享
下面小編就為大家分享一篇Vue cli 引入第三方JS和CSS的常用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
Vue百度地圖maker標(biāo)注的添加和刪除方式
這篇文章主要介紹了Vue百度地圖maker標(biāo)注的添加和刪除方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
element UI 2.15.13與vue2.0表格勾選回顯關(guān)鍵demo
這篇文章主要為大家介紹了element UI 2.15.13與vue2.0表格勾選回顯關(guān)鍵demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-11-11
Vue 防止短時(shí)間內(nèi)連續(xù)點(diǎn)擊后多次觸發(fā)請(qǐng)求的操作
這篇文章主要介紹了Vue 防止短時(shí)間內(nèi)連續(xù)點(diǎn)擊后多次觸發(fā)請(qǐng)求的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue 實(shí)現(xiàn)邊輸入邊搜索功能的實(shí)例講解
今天小編就為大家分享一篇vue 實(shí)現(xiàn)邊輸入邊搜索功能的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue項(xiàng)目下npm或yarn下安裝echarts多個(gè)版本方式
這篇文章主要介紹了vue項(xiàng)目下npm或yarn下安裝echarts多個(gè)版本方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
基于vue-cli3+typescript的tsx開發(fā)模板搭建過程分享
這篇文章主要介紹了搭建基于vue-cli3+typescript的tsx開發(fā)模板,本文通過實(shí)例代碼截圖的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-02-02
使用vue-router為每個(gè)路由配置各自的title
這篇文章主要介紹了如何使用vue-router為每個(gè)路由配置各自的title,及使用vue router的方法，需要的朋友可以參考下
2018-07-07
Vue在頁(yè)面數(shù)據(jù)渲染完成之后的調(diào)用方法
今天小編就為大家分享一篇Vue在頁(yè)面數(shù)據(jù)渲染完成之后的調(diào)用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
nuxt.js 在middleware(中間件)中實(shí)現(xiàn)路由鑒權(quán)操作
這篇文章主要介紹了nuxt.js 在middleware(中間件)中實(shí)現(xiàn)路由鑒權(quán)操作，具有很好的參考價(jià)值，希望大家有所幫助。一起跟隨小編過來看看吧
2020-11-11