Vue.js中$refs{}如何獲取DOM元素

更新時間：2024年03月06日 08:36:11 作者：Yvonne.Y

這篇文章主要介紹了Vue.js中$refs{}如何獲取DOM元素問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

$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>