如果我们想获取DOM元素，一般使用js中的document.querySelector来获取这个dom节点，然后在获取元素的值，现在Vue提供给我们一种更便捷的方式来获取DOM元素-----$refs{}

$refs{}----获取标签元素

说明：一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例

作用：减少DOM操作

用法：

原生方法

此例是利用原生jsdocument.getElementById()获取元素

<div id="app">
    <input type="button" value="获取元素" @click=btn>
    <h3 id="myh3">哈哈, 今天天气不错</h3>
</div>

<script>
    var vm= new Vue({
           
    
        el:#app,
        data:{
           
    },
        methods: {
           
    
            btn(){
           
    
                console.log(document.getElementById(myh3).innerText);
               
            }
        }
    })
    console.log(vm);
</script>

效果如下：

我们将vm实例输出，查看这个对象

vm.$refs方法获取

1. 给元素定义ref=",输出vm实例

<h3 id="myh3" ref="myh3">哈哈, 今天天气不错</h3>

2. 在实例的方法中输出，

获取元素方法如下：

console.log(this.$refs.myh3);

获取内容方法如下：

console.log(this.$refs.myh3.innertext);
//或者
console.log(this.$refs.myh3.innerHtml);

$refs{}----获取Vue组件

查看vm实例：

<div id="app">
    <input type="button" value="获取元素" @click=btn>
    <login ref=mylogin></login>
</div>

<script>
    var login={
           
    
        template:<h1>登录组件</h1>,
        data() {
           
    
            return {
           
    
                msg:son msg
            }
        },
        methods: {
           
    
            show(){
           
    
                console.log(调用了子组件的方法);
            }
        },
    }
    var vm= new Vue({
           
    
        el:#app,
        data:{
           
    },
        methods: {
           
    
            btn(){
           
    
            }
        },
        components:{
           
    
            login
        }
    })
    console.log(vm);
</script>

利用$refs获取子组件的方法：

console.log(this.$refs.mylogin);

利用$refs获取子组件内容的方法：

this.$refs.mylogin.show();

利用$refs获取子组件中的data：

console.log(this.$refs.mylogin.msg);