如果我们想获取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方法获取

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

在实例的方法中输出，

获取元素方法如下：

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);