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

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

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

$refs{}----獲取標(biāo)簽元素

說(shuō)明：一個(gè)對(duì)象，持有注冊(cè)過(guò) ref attribute 的所有 DOM 元素和組件實(shí)例

作用：減少DOM操作

用法：

原生方法

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

<div id="app">
    <input type="button" value="獲取元素" @click='btn'>
    <h3 id="myh3">哈哈, 今天天氣不錯(cuò)</h3>
</div>

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

效果如下：

我們將vm實(shí)例輸出，查看這個(gè)對(duì)象

vm.$refs方法獲取

1.給元素定義ref=",輸出vm實(shí)例

<h3 id="myh3" ref="myh3">哈哈, 今天天氣不錯(cuò)</h3>

2.在實(shí)例的方法中輸出，

獲取元素方法如下：

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

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

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

$refs{}----獲取Vue組件

查看vm實(shí)例：

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

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

您可能感興趣的文章:

相關(guān)文章

前端vue+elementUI如何實(shí)現(xiàn)記住密碼功能
這篇文章主要給大家介紹了關(guān)于vue+elementUI如何實(shí)現(xiàn)記住密碼功能的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09
vue3中做文件預(yù)覽的項(xiàng)目實(shí)踐
本文主要介紹了在Vue3項(xiàng)目中實(shí)現(xiàn)常見(jiàn)文件類型的預(yù)覽功能,包括docx、xlsx、pdf、txt、png、jpg、jpeg、mp4和mp3,具有一定的參考價(jià)值,感興趣的可以了解一下
2025-01-01
Vue2.0在IE11版本瀏覽器中的兼容性問(wèn)題
這篇文章主要介紹了Vue2.0在IE11版本瀏覽器中的兼容性問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue如何優(yōu)雅的使用全局WebSocket
這篇文章主要介紹了vue如何優(yōu)雅的使用全局WebSocket問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08
解決vux 中popup 組件Mask 遮罩在最上層的問(wèn)題
這篇文章主要介紹了解決vux 中popup 組件Mask 遮罩在最上層的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vue路由傳參刷新后數(shù)據(jù)丟失問(wèn)題及解決
這篇文章主要介紹了vue路由傳參刷新后數(shù)據(jù)丟失問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
總結(jié)4個(gè)方面優(yōu)化Vue項(xiàng)目
在本篇文章里我們給大家整理了一篇關(guān)于優(yōu)化VUE項(xiàng)目的四個(gè)總要點(diǎn)，對(duì)此有需要的朋友們學(xué)習(xí)下天。
2019-02-02
vue實(shí)現(xiàn)搜索小功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)搜索小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
使用Vue3優(yōu)雅地實(shí)現(xiàn)表格拖動(dòng)排序
在?Vue.js?中主要通過(guò)第三方庫(kù)實(shí)現(xiàn)表格拖動(dòng)排序功能,其中最常用的庫(kù)是?SortableJS,下面我們就來(lái)看看如何使用SortableJS實(shí)現(xiàn)表格拖動(dòng)排序吧
2025-01-01
vue組件中點(diǎn)擊按鈕后修改輸入框的狀態(tài)實(shí)例代碼
要求點(diǎn)擊修改按鈕之后部分輸入框由禁用狀態(tài)變?yōu)榭捎脿顟B(tài)。下面我給大家分享一段實(shí)例代碼基于vue組件中點(diǎn)擊按鈕后修改輸入框的狀態(tài)，需要的的朋友參考下
2017-04-04