Vue $refs

Vue：2.5

在使用 Vue 開發網站時，有兩種狀況很使人苦惱：

• 想要取得 DOM Element 的資訊時（例如寬度）
• 想要從 父元件 取得 子元件 的資料時

因此，Vue 提供了 $refs 這個 Instance Property 的來解決上述問題；只要在透過 ref 這個 Attribute 就可以讓 Vue 定位取得你想要的 Instance。

做法很簡單，只要在你想要的 Element 上給定一個 ref value，在元件中只要搭配 this.$refs.<your_ref_value> 就可以取得這個 Element or 元件的 Instance 了。

取得 DOM Element 資訊

因為效能的關係，Vue 採用 Virtual DOM 的做法渲染網頁，如果直接強制操作 DOM，很容易產生實際頁面跟 Vue 不同步的問題，因此還是建議透過 $refs 來處理。

範例

<div id="app">
    <!-- ref attribute，也可以透過 :ref 的方式代入變數 -->
    <div ref="childDiv">
        <child-component></child-component>
    </div>
    <button @click="show">child-component element info</button>
</div>

// 子元件
Vue.component('child-component', {
    template: '<div style="height: 100px;">子元件</div>'
});

// 父元件
const vm = new Vue({
    el: '#app',
    data: {},
    methods: {
        show: function () {
            // 透過 $refs 取得 div 的寬、高
            console.log(this.$refs.childDiv.clientWidth);
            console.log(this.$refs.childDiv.clientHeight);
        }
    }
});

取得子元件資訊

另外，要直接從 父元件 取得 子元件 資料的狀況也很常遇到。

舉個例子，假設我有兩個計數器子元件，我要在父元件取得兩個子元件各別的 count 數並加以判斷時，就適合使用 $refs 。

範例

<div id="app">
    <!-- ref attribute -->
    <child-component ref="child1"></child-component>
    <child-component ref="child2"></child-component>
    <button @click="show">alert child-component count</button>
</div>

// 子元件
Vue.component('child-component', {
    data: function () {
        return {
            count: 20
        };
    },
    methods: {
        getOne: function () {
            this.count++;
        }
    },
    template: '<button @click="getOne">{{ count }}</button>'
});

// 父元件
const vm = new Vue({
    el: '#app',
    data: {},
    methods: {
        show: function () {
            // 透過 $refs 取得子元件的 count
            console.log(this.$refs.child1.count);
            console.log(this.$refs.child2.count);
        }
    }
});