vue学习（七）refs的使用

ref的使用只有在特殊的情况下使用

1.如果给标签添加ref，获取的就是真实的DOM节点
2. 如果给子组件添加ref，获取的就是当前的子组件对象

例子：

<div id="app">
    <App></App>
</div>



<script>
    const Test={
        data(){
            return{

            }
        },
        components:{

        },
        template: `
        <div>

        </div>


        `
    };
    const App={
        data(){
            return{

            }
        },
        components:{

        },
        mounted(){
            // 1.如果给标签添加ref，获取的就是真实的DOM节点
            // 2. 如果给子组件添加ref，获取的就是当前的子组件对象
            // ---------
            // 有可能有很多ref所有写成refs
          console.log(this.$refs.btn);
          // input 框自动获取焦点
            this.$refs.input.focus();
        },
        template: `
        <div>
            <Test></Test>
            <button ref="btn">改变生死</button>
            <input type="text" ref="input">
        </div>


        `
    };
    let app = new Vue({
        el:'#app',
        data:{

        },
        components:{
            App
        }
    })
</script>