国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue訪問元素&組件

qujian / 2871人閱讀

摘要:訪問子組件實例或子元素盡管存在和事件,有的時候你仍可能需要在里直接訪問一個子組件。注意只會在組件渲染完成之后生效,并且它們不是響應式的。

訪問根實例

在每個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引用。例如:

現在在你已經定義了這個ref的組件里,你可以使用:

this.$refs.usernameInput

來訪問這個 實例,以便不時之需。
當 ref 和 v-for 一起使用的時候,你得到的引用將會是一個包含了對應數據源的這些子組件的數組。
注意:

$refs 只會在組件渲染完成之后生效,并且它們不是響應式的。這僅作為一個用于直接操作子組件的“逃生艙”——你應該避免在模板或計算屬性中訪問 $refs。
依賴注入

  
    
  

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

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

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

inject:["getMap"]

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

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

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/102765.html

相關文章

  • 詳解Vue3 Composition API優雅封裝第三方組件

      我們時常會想在保持第三方組件原有功能(屬性props、事件events、插槽slots、方法methods)的基礎上,這些功能如何優化的實現?  以Element Plus的el-input為例:  在封裝一個MyInput組件,把要使用的屬性props、事件events和插槽slots、方法methods先要依照自己的需求來編寫:  //MyInput.vue   <template&...

    3403771864 評論0 收藏0
  • 在前端框架中封裝Vue第三方組件的三個小技巧

      這篇就是帶大家一起學習下在封裝第三方組件中,通過封裝的組件去使用第三方組件的Attributes(屬性)、Events(自定義事件)、Methods(方法)、Slots(插槽)以及優化技巧。  一、使用第三方組件的屬性  封裝一個elementUI的el-input輸入框組件稱為myInput,若要在myInput組件上添加一個disabled屬性來禁用輸入框,這樣的情況要怎么做?  //my...

    3403771864 評論0 收藏0
  • angular,react &amp; vue

    摘要:由進行開發和維護,代發布于年月,現在主要是。狀態是只讀的,只能通過來改變,以避免競爭條件這也有助于調試。文件大小為,而為,為。請記住,性能基準只能作為考慮的附注,而不是作為判斷標準。使用的人員報告說,他們永遠不必閱讀庫的源代碼。 本文當時寫在本地,發現換電腦很不是方便,在這里記錄下。 angular,react & vue 2018/07/23 2016年,對于JavaScript來說...

    jiekechoo 評論0 收藏0
  • Vue.js進入/離開&amp;列表過度動畫。

    摘要:包括以下工具在過渡和動畫中自動應用可以配合第三方動畫庫,如在過渡鉤子函數中使用直接操作可以配合使用第三方動畫庫,如在這里,我們只會講到進入離開和列表的過渡。不僅可以進入和離開動畫,還可以改變定位。 概述 Vue在插入、更新或則移除DOM時,提供多種不同方式的應用過渡效果。包括以下工具: *在CSS過渡和動畫中自動應用class *可以配合第三方CSS動畫庫,如Animate.css *...

    thekingisalwaysluc 評論0 收藏0

發表評論

0條評論

qujian

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<