vue 2.0 的 ref 是一個非常有用的屬性,它可以用來在父組件中引用子組件或元素,從而訪問其屬性和方法。你可以為任何元素或組件添加一個 ref 屬性,然后通過 $refs 對象在父組件中訪問。
例如,考慮一個簡單的組件,它包含一個 input 元素:
<template>
<div>
<input type="text" ref="myInput">
</div>
</template>
<script>
export default {
mounted() {
console.log(this.$refs.myInput);
}
}
</script>
在這個例子中,我們為 input 元素添加了一個 ref 屬性,然后在組件的 mounted 鉤子中,我們可以通過 this.$refs.myInput 來訪問 input 元素。我們可以在控制臺中看到輸出結果,它是一個表示 input 元素的 DOM 對象。
除了訪問 DOM 元素,ref 還可以用來訪問子組件的屬性和方法:
<template>
<div>
<my-component ref="myComponent"></my-component>
</div>
</template>
<script>
import MyComponent from './MyComponent';
export default {
components: {
MyComponent
},
mounted() {
this.$refs.myComponent.doSomething();
}
}
</script>
在這個例子中,我們在父組件中引用了一個子組件 MyComponent,并給它添加了一個 ref 屬性。然后在 mounted 鉤子中,我們可以通過 this.$refs.myComponent 來訪問子組件實例,然后調用它的一個方法 doSomething()。
總之,ref 是一個非常有用的屬性,它可以幫助我們在父組件中訪問子組件和 DOM 元素。當需要在組件中使用某個元素或組件的屬性和方法時,我們可以使用 ref 來獲取它的引用,并隨時訪問它的屬性和方法。