vue$refの基本的な使い方

998 ワード

1、一般的なラベルに使う

これによりvueでは$refを使用してdomノードを取得し、いくつかのdomの操作を行うことができます.
次の例では、input入力ボックスの文字数を制御します.
new Vue({
    el:'#app',
    data:{
        active:{'name':''}
    },
    watch:{
        active:{
           handler:function(){
                var _this = this;
                var _sum = 4; //     4 
                _this.$refs.count.setAttribute("maxlength",_sum);
           },
           deep:true
        }
    },
})

2、サブコンポーネントに使用して、サブコンポーネントの属性値を取得することができます.サブコンポーネントに属性newsがあると仮定します.
new Vue({
    el:'#app',
    mounted:function () {
        console.log(this.$refs.hdnews.news);
        console.log(this.$refs.hdinfo.news);
    }
})