詳解Vue多級組件透傳新方法provide/inject

provide / inject 是 2.2 新增的方法，可以以一個祖先組件向所有子孫后代注入依賴（一個內(nèi)容）。

我們提供的服務(wù)有：成都做網(wǎng)站、網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、圖木舒克ssl等。為上1000家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的圖木舒克網(wǎng)站制作公司

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

Vue 官方警告：

provide 和 inject 主要為高階插件/組件庫提供用例。并不推薦直接用于應(yīng)用程序代碼中。

當(dāng)然，警告只是警告，你完全可以正常使用。

使用方法非常像 data 和 props 的組合大禮包：

var Provider = {
 provide: {
 foo: 'bar'
 },
 // ...
}
var Child = {
 inject: ['foo'],
 created () {
 console.log(this.foo) // => "bar"
 }
 // ...
}

唯一的區(qū)別是你不用再一層層的傳入了，過去用的 event-bus 雖然可以解決深層問題，但是會導(dǎo)致整個 event-emit 組成過于混亂，難以維護(hù)。使用 provide / inject 可以保證父子單向數(shù)據(jù)流的清晰性。

在 React 中 Context 的 Provider / Consumer 也有相同的效果，由于還沒有具體使用過，對 React 本身也只有一面之緣，留待以后在了解，感興趣的同學(xué)可以 閱讀文檔 了解。

參考文章：

Vue 官方文檔
Provide/Inject in Vue 2.2

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章名稱：詳解Vue多級組件透傳新方法provide/inject
標(biāo)題鏈接：http://muchs.cn/article34/ihipse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、品牌網(wǎng)站制作、定制網(wǎng)站、微信小程序、建站公司、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)