天天看點

inject 響應式_跨級元件通信之provide/inject

介紹

在深層次的元件通信中,我們除了使用中央事件總線eventbus外,還可以使用元件的依賴注入方法及provide/inject。

provide選項允許我們指定我們想要提供給後代元件的資料/方法。

如果提供的是方法

如果提供的是資料

然後在任何後代元件裡,我們都可以使用inject選項來接收指定的我們想要添加在這個執行個體上的屬性:

執行個體示範

建立parent.vue,提供變量name,并調用children1元件

建立children1.vue,并在其中調用children2.vue

建立children2.vue,并在其中注入祖先提供的變量

結果

inject 響應式_跨級元件通信之provide/inject

通俗來講,你可以把依賴注入看作一部分“大範圍有效的 prop”, 祖先元件不需要知道哪些後代元件使用它提供的屬性,後代元件不需要知道被注入的屬性來自哪裡。

但是,它還是有一定的負面效果。它将你應用程式中的元件與它們目前的組織方式耦合起來,使重構變得更加困難。同時所提供的屬性是非響應式的。

provide和inject主要為高階插件/元件庫提供用例。并不推薦直接用于應用程式代碼中。

官方文檔也說了,如果想要想在祖先元件中更新所提供的資料,那麼這意味着你可能需要換用一個像Vuex這樣真正的狀态管理方案了。

今天的内容到此結束了,希望可以幫到你。

下一節,我們講Vuex。

曆史内容

What exactly is Node.js?

用node搭建一個伺服器

補充總結node

loading小案例

國産浏覽器的發展史

浏覽器發展史

元件的通信--eventBus

inject 響應式_跨級元件通信之provide/inject