vue存取元素和元件的方法（附範例）

這篇文章帶給大家的內容是關於vue存取元素和元件的方法（附範例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

存取根實例

在每個new Vue實例的子元件中，其根實例可以透過$root屬性進行存取。
範例：

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

所有的子元件都可以將這個實例當作一個全域store來存取或使用。

/ 获取根组件的数据
this.$root.foo

// 写入根组件的数据
this.$root.foo = 2

// 访问根组件的计算属性
this.$root.bar
// 调用根组件的方法
this.$root.baz()

注意：
對於demo或非常小型的有少量元件的應用來說這是很方便的。不過這個模式擴展到中大型應用來說就不合適了。因此在絕大多數情況下，我們強烈建議使用Vuex來管理應用程式的狀態。

存取父元件實例

和$root類似，$parent屬性可以用來從一個子元件存取父元件的實例。它提供了一種機會，可以在後期隨時觸及父級元件，以替代將資料以prop的方式傳入子元件的方式。
注意：

在绝大多数情况下，触达父级组件会使得你的应用更难调试和理解，尤其是当你变更了父级组件的数据的时候。当我们稍后回看那个组件的时候，很难找出那个变更是从哪里发起的。

## 存取子元件實例或子元素
##儘管存在prop和事件，有的時候你仍可能需要在Javascript裡直接存取一個子元件。為了達到這個目的，你可以透過ref特性為這個子元件賦予一個ID引用。例如：

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

現在在你已經定義了這個ref的元件裡，你可以使用：

this.$refs.usernameInput

來存取這個 實例，以便不時之需。
當 ref 和 v-for 一起使用的時候，你得到的引用將會是一個包含了對應資料來源的這些子元件的陣列。
注意：

$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $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>

在這個元件裡，所有的後代都需要存取一個getMap方法，以便知道要跟哪個地圖進行交互。不幸的是，使用$parent屬性無法很好的擴展到更深層的嵌套組件上。這也是依賴注入的用武之地，它用到了兩個新的實例屬性：provide和inject。
provide選項可讓我們指定我們想要提供給後代元件的資料/方法。在這個例子中，就是內部的getMap方法：

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

然後在任何後代元件裡，我們都可以透過使用inject選項來接收指定的我們想要加入這個實例上的屬性：

inject:['getMap']

比較$parent來說，這個用法可以讓我們在任意後代元件中存取getMap，而不需要暴露整個實例。這允許我們更好的持續研發該組件，而不需要擔心我們可能會改變/移除一些子組件依賴的東西。同時這些元件之間的介面是始終明確定義的，就和props一樣。
祖先組件不需要知道哪些後代組件使用它提供的屬性
後代組件不需要知道被注入的屬性來自哪裡
注意：

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

這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的JavaScript教學影片專欄！

以上是vue存取元素和元件的方法（附範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！