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

再运行时：