6-ref的使用某些时候我们可能需要在js中直接访问一个组件或者是直接访问DOM标签，对它进行操作。为了达到这个目的，V

某些时候我们可能需要在js中直接访问一个组件或者是直接访问DOM标签，对它进行操作。为了达到这个目的，Vue提供了一个ref属性，为当前的子组件或者是标签赋予一个id的引用，有了这个id引用之后我们可以通过this.$refs.ref属性值获取。

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

<body>
    <div id="app">
        <App></App>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.component('Test', {
            data() {
                return {
                    msg: 'tom'
                }
            },
            template: `
            <div>
                <h3>{{ msg }}</h3>        
            </div>
            `
        })

        const App = {
            template: `
            <div>
                <Test ref='test'></Test>
                <input type='text' ref='input'/>
                <button ref='btn'>点我</button>
            </div>
            `,
            mounted() {
                // 1.如果给标签添加ref,获取的就是真实的DOM节点
                // 2.如果给子组件添加ref,获取的是当前子组件对象
                console.log(this.$refs.test);
                // 加载页面,自动获取焦点
                this.$refs.input.focus();
                console.log(this.$refs.btn);
            },
        }

        new Vue({
            el: '#app',
            components: {
                App
            }
        })
    </script>
</body>

不要滥用ref属性，Vue推崇的是数据驱动视图，而不是直接去操作DOM，只有在一些特殊情况下才会使用ref属性。