vue $refs的基本用法

一、ref作用于Html标签

<div id="app">
    <input type="text" ref="input1"/>
     <p ref="thisisp">我是p标签</p>
    <button @click="add">添加</button>
</div>

<script>
new Vue({
    el: "#app",
    methods:{
    add:function(){
        this.$refs.input1.value ="22"; //this.$refs.input1  减少获取dom节点的消耗
       console.log(this.$refs.thisisp.innerText)     //就是p标签的内容
        }
    }
})
</script>

一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了

二. ref作用于组件

<div id="app">
    <navbar></navbar>
    <pagefooter></pagefooter>
</div>
Vue.component('navbar',{
    template:'#navbar',
    data:function () {
        return {
            navs:[]
        }
    }
});
Vue.component('pagefooter',{
    template:'#pagefooter',
    data:function () {
        return {
            footer:''
        }
    }
});
new Vue({
    el:'#app',
    mounted:function () {
        //ready,
        //这里怎么直接访问navbar的navs和pagefooter的footer值呢，
    }
})

<div id="app">
    <navbar ref="navbar"></navbar>
    <pagefooter ref="pagefooter"></pagefooter>
</div>


new Vue({
    el:'#app',
    mounted:function () {
        //ready,
        //这里怎么直接访问navbar的navs和pagefooter的footer值呢，
        console.log(this.$refs.navbar.navs);
        console.log(this.$refs.pagefooter.footer);
    }
})