vue如何訪問(wèn)元素和組件

這篇文章主要介紹了vue如何訪問(wèn)元素和組件，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

訪問(wèn)根實(shí)例

在每個(gè)new Vue實(shí)例的子組件中，其根實(shí)例可以通過(guò)$root屬性進(jìn)行訪問(wèn)。
例子：

// Vue 根實(shí)例
new Vue({
  data: {
    foo: 1
  },
  computed: {
    bar: function () { /* ... */ }
  },
  methods: {
    baz: function () { /* ... */ }
  }
})

所有的子組件都可以將這個(gè)實(shí)例作為一個(gè)全局store來(lái)訪問(wèn)或使用。

/ 獲取根組件的數(shù)據(jù)
this.$root.foo

// 寫(xiě)入根組件的數(shù)據(jù)
this.$root.foo = 2

// 訪問(wèn)根組件的計(jì)算屬性
this.$root.bar
// 調(diào)用根組件的方法
this.$root.baz()

注意：
對(duì)于demo或非常小型的有少量組件的應(yīng)用來(lái)說(shuō)這是很方便的。不過(guò)這個(gè)模式擴(kuò)展到中大型應(yīng)用來(lái)說(shuō)就不合適了。因此在絕大多數(shù)情況下，我們強(qiáng)烈推薦使用Vuex來(lái)管理應(yīng)用的狀態(tài)。

訪問(wèn)父組件實(shí)例

和$root類似，$parent屬性可以用來(lái)從一個(gè)子組件訪問(wèn)父組件的實(shí)例。它提供了一種機(jī)會(huì)，可以在后期隨時(shí)觸達(dá)父級(jí)組件，以替代將數(shù)據(jù)以prop的方式傳入子組件的方式。
注意：

在絕大多數(shù)情況下，觸達(dá)父級(jí)組件會(huì)使得你的應(yīng)用更難調(diào)試和理解，尤其是當(dāng)你變更了父級(jí)組件的數(shù)據(jù)的時(shí)候。當(dāng)我們稍后回看那個(gè)組件的時(shí)候，很難找出那個(gè)變更是從哪里發(fā)起的。

## 訪問(wèn)子組件實(shí)例或子元素 ##
盡管存在prop和事件，有的時(shí)候你仍可能需要在Javascript里直接訪問(wèn)一個(gè)子組件。為了達(dá)到這個(gè)目的，你可以通過(guò)ref特性為這個(gè)子組件賦予一個(gè)ID引用。例如：

<base-input ref="usernameInput"></base-input>

現(xiàn)在在你已經(jīng)定義了這個(gè)ref的組件里，你可以使用：

this.$refs.usernameInput

來(lái)訪問(wèn)這個(gè) <base-input> 實(shí)例，以便不時(shí)之需。
當(dāng) ref 和 v-for 一起使用的時(shí)候，你得到的引用將會(huì)是一個(gè)包含了對(duì)應(yīng)數(shù)據(jù)源的這些子組件的數(shù)組。
注意：

$refs 只會(huì)在組件渲染完成之后生效，并且它們不是響應(yīng)式的。這僅作為一個(gè)用于直接操作子組件的“逃生艙”——你應(yīng)該避免在模板或計(jì)算屬性中訪問(wèn) $refs。

依賴注入

<google-map>
  <google-map-region v-bind:shape="cityBoundaries">
    <google-map-markers v-bind:places="iceCreamShops"></google-map-markers>
  </google-map-region>
</google-map>

在這個(gè)組件里，所有<google-map>的后代都需要訪問(wèn)一個(gè)getMap方法，以便知道要跟哪個(gè)地圖進(jìn)行交互。不幸的是，使用$parent屬性無(wú)法很好的擴(kuò)展到更深層級(jí)的嵌套組件上。這也是依賴注入的用武之地，它用到了兩個(gè)新的實(shí)例屬性：provide和inject。
provide選項(xiàng)允許我們指定我們想要提供給后代組件的數(shù)據(jù)/方法。在這個(gè)例子中，就是<google-map>內(nèi)部的getMap方法：

provide(){
    return{
        getMap:this.getMap
    }
}

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

inject:['getMap']

相比$parent來(lái)說(shuō)，這個(gè)用法可以讓我們?cè)谌我夂蟠M件中訪問(wèn)getMap，而不需要暴露整個(gè)<google-map>實(shí)例。這允許我們更好的持續(xù)研發(fā)該組件，而不需要擔(dān)心我們可能會(huì)改變/移除一些子組件依賴的東西。同時(shí)這些組件之間的接口是始終明確定義的，就和props一樣。
祖先組件不需要知道哪些后代組件使用它提供的屬性
后代組件不需要知道被注入的屬性來(lái)自哪里
注意：

然而，依賴注入還是有負(fù)面影響的。它將你的應(yīng)用以目前的組件組織方式耦合了起來(lái)，使重構(gòu)變得更加困難。同時(shí)所提供的屬性是非響應(yīng)式的。這是出于設(shè)計(jì)的考慮，因?yàn)槭褂盟鼈儊?lái)創(chuàng)建一個(gè)中心化規(guī)模化的數(shù)據(jù)跟使用 $root做這件事都是不夠好的。如果你想要共享的這個(gè)屬性是你的應(yīng)用特有的，而不是通用化的，或者如果你想在祖先組件中更新所提供的數(shù)據(jù)，那么這意味著你可能需要換用一個(gè)像 Vuex 這樣真正的狀態(tài)管理方案了。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享vue如何訪問(wèn)元素和組件內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!