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>