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

魏都網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)公司！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護(hù)。成都創(chuàng)新互聯(lián)公司從2013年創(chuàng)立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)公司。

訪問根實例

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

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

所有的子組件都可以將這個實例作為一個全局store來訪問或使用。

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

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

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

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

訪問父組件實例

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

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

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

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

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

this.$refs.usernameInput

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

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

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

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

然后在任何后代組件里，我們都可以通過使用inject選項來接收指定的我們想要添加在這個實例上的屬性：

inject:['getMap']

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

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

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

分享題目：vue如何訪問元素和組件
文章分享：http://aaarwkj.com/article48/ijhhep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、網(wǎng)站導(dǎo)航、響應(yīng)式網(wǎng)站、動態(tài)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(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)