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

獲取內(nèi)容方法如下：

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('調(diào)用了子組件的方法');
            }
        },
    }
    var vm= new Vue({
        el:'#app',
        data:{},
        methods: {
            btn(){
            }
        },
        components:{
            login
        }
    })
    console.log(vm);
</script>

利用$refs獲取子組件的方法：

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

利用$refs獲取子組件內(nèi)容的方法：

this.$refs.mylogin.show();

利用$refs獲取子組件中的data：

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

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue3的provide和inject實現(xiàn)多級傳遞的原理解析
Vue3中的provide和inject函數(shù)通過原型鏈實現(xiàn)數(shù)據(jù)的多級傳遞,父組件使用provide注入數(shù)據(jù),子組件和后代組件通過inject獲取這些數(shù)據(jù),在創(chuàng)建組件實例時,子組件會繼承父組件的provides屬性對象,介紹Vue3的provide和inject實現(xiàn)多級傳遞的原理,需要的朋友可以參考下
2024-12-12
vue下的elementui輪播圖自適應(yīng)高度問題
這篇文章主要介紹了vue下的elementui輪播圖自適應(yīng)高度問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue.js表單驗證插件(vee-validate)的使用教程詳解
這篇文章主要介紹了vue.js表單驗證插件(vee-validate)的使用，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-05-05
前端Vue項目詳解--初始化及導(dǎo)航欄
這篇文章主要介紹了前端Vue項目詳解--初始化及導(dǎo)航欄,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，,需要的朋友可以參考下
2019-06-06
Vue 數(shù)值改變頁面沒有刷新的問題解決(數(shù)據(jù)改變視圖不更新的問題)
這篇文章主要介紹了Vue 數(shù)值改變頁面沒有刷新的問題解決(數(shù)據(jù)改變視圖不更新的問題),本文結(jié)合實例代碼給大家介紹的非常詳細,對大家的學(xué)習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-09-09
vue中Props與Attrs的實現(xiàn)實例
本文主要介紹了vue中Props與Attrs的實現(xiàn)實例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
2025-09-09
vue動態(tài)類名及動態(tài)樣式設(shè)置方式:class/:style
文章主要介紹了在Vue中設(shè)置動態(tài)類名（:class）和動態(tài)樣式（:style）的方法,動態(tài)類名方面,使用三元表達式、結(jié)合過濾器和計算屬性等方法進行設(shè)置,動態(tài)樣式方面,介紹了基礎(chǔ)用法、結(jié)合計算屬性和三元表達式進行設(shè)置等方法
2022-05-05
Vue.js之VNode的使用
這篇文章主要介紹了Vue.js之VNode的使用，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧
2021-04-04
Element-UI控件Tree實現(xiàn)數(shù)據(jù)樹形結(jié)構(gòu)的方法
這篇文章主要介紹了Element-UI控件Tree實現(xiàn)數(shù)據(jù)樹形結(jié)構(gòu),本期介紹添加、修改等功能也比較簡單,可以通過element-ui的$prompt彈框控件來實現(xiàn),需要的朋友可以參考下
2024-01-01
如何為老vue項目添加vite支持詳解
Vite是一個開發(fā)環(huán)境工具，旨在提高我們的開發(fā)速度,下面這篇文章主要給大家介紹了關(guān)于如何為老vue項目添加vite支持的相關(guān)資料,需要的朋友可以參考下
2021-09-09