vue.js ref属性使用

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象(根元素上)上

给text组件注册信息,text组件的信息将会传递给他根容器(<div id="vue-app">)的$refs对象上

    <!--vue-app是根容器-->
    <div id="vue-app">
        <input type="text" v-on:keyup="log" ref="aa">

        <span>{{ value }}</span>
        <input type="text" v-on:keyup="log" ref="bb">
    </div>

当我们在text组件上输入文字时,会触发log方法

new Vue({
    el:"#vue-app",
    data:{
        value:null
    },
    methods:{
        log:function(event){
            console.log(this.$refs);;
        }
    }
});

log方法触发后如下图,从下图可看出,this.$refs对象中包含了两个对象,而这两个对象既是上面所定义的两个 text 组件对象

当我把 log 方法改为

log:function(event){
            console.log(this.$refs.aa.value);
        }

再运行时:

 

 

 

 

原文链接:加载失败,请重新获取