快捷導(dǎo)航

Vue?privide?和inject?依賴注入的使用詳解

更新時(shí)間：2022年10月31日 15:59:00 作者：技術(shù)楊

這篇文章主要介紹了Vue?privide?和inject?依賴注入的用法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言

關(guān)于Vue組件的通訊方式如下：

父子組件：通過(guò)prop，$ emit，【$ root，$ parent，$ children】；
非父子組件：vuex，父子層層傳遞、中央事務(wù)總線bus，$ref。

vue官網(wǎng)建議，在正常情況下，上述方式已經(jīng)能滿足絕大多數(shù)甚至所有的業(yè)務(wù)需求，對(duì)于應(yīng)用程序代碼應(yīng)優(yōu)先使用它們處理。然而，還有一種主要為高階插件/組件庫(kù) 提供的用例辦法，即 provide / inject （這對(duì)選項(xiàng)需要一起使用）。

from表示在可用的注入內(nèi)容中搜索用的 key，default當(dāng)然就是默認(rèn)值。

示例

// 父級(jí)組件提供'foo'
var Provider = {
  provide:{
    foo:'bar'
   },
   //...
  }
 子組件注入'foo'
 var Child = {
   inject:['foo'],
   created(){
    console.log(this.foo) // =>"bar"
   }
   //...
  }

項(xiàng)目案例

父組件

項(xiàng)目最外層的布局組件layout.vue

<template>
   <div>
   <!--主內(nèi)容-->
   <router-view></router-view>
   </div>
 </template>
 <script>
    export default{
       name:'layout',
       provide(){
          return{
               layout:this//這里的this值當(dāng)前l(fā)ayout組件實(shí)例
	       box:'world'
	     }
	  },
	  data(){
	     return{
	        test:'hello'
	   }
	 },
}
</script>

這里就是我們說(shuō)的provide，向下提供信息，這里提供的是當(dāng)前的vue實(shí)例，相當(dāng)于給了后代一個(gè)接口。

這樣在任何的后代組件中，都可以使用inject選項(xiàng)來(lái)接收指定的我們想要添加在這個(gè)實(shí)例上的屬性。

子組件

layout.vue 組件內(nèi)的router-view 可能路由進(jìn)來(lái)很多其它子孫組件，比如order.vue

<script>
    export default {
     name:'order',
     inject:['layout','box'],
     created(){
     console.log(this.layout.test);//hello
     console.log(this.box);//world
     }
    }