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 然後在任何後代元件裡...