Vue 依賴注入 provide inject

2021-09-28 11:15:22 字數 1625 閱讀 2441

provide/inject是解決元件之間的通訊問題的利器,不受層級結構的限制。

小白,修改乙個官網的例子

<

!doctype html>

"utf-8"

>

<

/title>

"js/vue2.6.js"

>

<

/script>

h1 h2

h3 <

/style>

<

/head>

"dynamic-component-demo"

>

"border:1px solid pink;"

>

"cityboundaries" style=

"border:1px solid red;width:80%;"

>

"icecreamshops" style=

"border:1px solid yellow;width:60%;"

>

<

/google-map-markers>

<

/google-map-region>

<

/google-map>

<

/div>

vue.

component

('google-map',}

, provide:

function()

, msg:

this

.msg

}},methods:}}

) vue.

component

('google-map-region'

,}111

` }

) vue.

component

('google-map-markers'

,}22

` }

)new

vue(

, computed:}}

)<

/script>

<

/body>

<

/html>

總結

google-map 、google-map-region、google-map-markers 在例項專案中以components的方式引入;

provide 先以官方的文件進行說明》選項應該是乙個物件或返回乙個物件的函式。該物件包含可注入其子孫的屬性。在該物件中你可以使用 es2015 symbols 作為 key,但是只在原生支援 symbol 和 reflect.ownkeys 的環境下可工作。總之provide需要寫在根級位置,並賦予需要傳遞的方法或引數,當然這個根級還是根據專案需求而改變。在官網例子中以google-map 為根元素,然後向子元素、子子元素傳遞方法。

inject 選項應該是 乙個字串陣列,或乙個物件,物件的 key 是本地的繫結名。在子元素注入引用父元素的方法或屬性,inject也 是乙個實現頁面重新整理的乙個利器。

v-bind:shape=「cityboundaries」 和 v-bind:places=「icecreamshops」 父元件向子元件傳遞資料

vue元件依賴注入

在這個元件裡,所有的後代都需要訪問乙個getmap方法,以便知道要跟哪個地圖進行互動。不幸的是,使用 parent屬性無法很好的擴充套件到更深層級的巢狀元件上。這也是依賴注入的用武之地,它用到了兩個新的例項選項 provide和inject。provide選項允許我們指定我們想要提供給後代元件的資料...

什麼是依賴注入,vue的依賴注入如何實現的

允許乙個祖先元件向其所有子孫後代注入乙個依賴,不論元件層次有多深 這也是使用 parent不好實現的地方 並在起上下游關係成立的時間裡始終生效。不用再關心dom層級,只要在祖先元件內部就可以一直使用祖先元件提供的provide provide 選項允許我們指定我們想要提供給後代元件的資料 方法。然後...

Vue依賴注入 provide 和 inject

允許乙個祖先元件向其所有子孫後代注入乙個依賴,不論元件層次有多深,並在起上下游關係成立的時間裡始終生效 provide選項允許我們指定我們想要提供給後代元件的資料 方法 provide選項應該是乙個物件或返回乙個物件的函式 provide function 或者 provide 然後在任何後代元件裡...