Vue中ref 的使用

在Vue中 官方给我们提供了一个vm.$refs 对象，里面包括注册过ref 的所有子组件
ref官方的解释为给元素或者子组件注册引用信息，如果在普通的DOM元素上使用，引用指向的就是DOM元素
如果用在子组件上，引用就只指向组件实例：
我们可以归结为两个目的：
1.在DOM元素上设置ref属性便于快速找到DOM元素
2.在子组件上使用ref便于指向子组件的实例，便于进行传值等操作（不局限于传值，也可以调用子组件上的方法等…）;
事例—

	<div id="app">
        <children-a ref="aaa"></children-a>
        <input type="text" ref="input"></input>
        <button @click="add">点击</button>
    </div>
        Vue.component('children-a',{
            name:'children-a',
            template:`<div>子组件</div>`,
            methods:{
                fn() {
                    console.log('子组件上的方法');
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data(){
                return {
                }
            },
            methods:{
                add() {
                    console.log(vm.$refs);
                    console,log(vm.$refs.input);
                }
            },
        })

可以复制这段代码查看输出就明白了！