Vue.js中$refs{}获取DOM元素

如果我们想获取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);