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 -->
    <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>'
});

// 父元件
var 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>'
});

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