在Vue.js中,我們可以通過ref屬性獲取到一個組件或者DOM元素的引用,ref就是一個為Vue中元素指定唯一ID的屬性,我們可以使用$refs來訪問這些元素或者組件引用。在Vue.js 1.x版本中,ref有比較明確的限制,只能在單個DOM元素上使用,不能用于指向組件。
這是標題
在上面的示例代碼中,我們在h1元素上使用了ref屬性,以及在input元素上使用的ref屬性,分別命名為"titleRef"和"inputRef"。在mounted生命周期鉤子中,我們可以使用this.$refs.titleRef來訪問h1元素的內容,以及使用this.$refs.inputRef來獲取input元素的值。需要注意的是,獲取組件的引用和獲取元素的引用的方法是不同的,在Vue.js 1.x版本中,需要使用v-el指令來獲取組件引用。
除了通過this.$refs獲取組件和元素的引用之外,在Vue.js 1.x版本中,我們還可以通過$els來訪問所有的元素引用。如果我們在模板中指定了一個表單元素的name屬性,那么我們就可以在Vue實例或者組件實例中通過this.$els來訪問這些元素的引用。
在上面的示例代碼中,我們在form表單中分別輸入了用戶名和密碼,并且給這兩個input元素指定了name屬性。當點擊提交按鈕時,我們在submitForm方法中通過this.$els.username和this.$els.password來訪問這兩個元素的引用,并且獲取了它們的值。
總結來說,在Vue.js 1.x版本中,ref只能用于指向單個DOM元素,不能用于指向組件。我們可以使用this.$refs來訪問這些元素的引用,以及使用$els來訪問所有表單元素的引用。對于Vue.js 2.x版本,ref的作用發生了一些變化,我們需要使用ref來獲取到組件的引用。