Heim > Artikel > Web-Frontend > Was bedeutet $refs in Vue?
Was bedeutet $refs in Vue?
- 青灯夜游Original
- 2022-12-14 19:27:122461Durchsuche
In Vue ist $refs ein Objekt, das alle DOM-Elemente und Komponenteninstanzen enthält, die mit dem ref-Attribut registriert sind. ref wird verwendet, um Referenzinformationen für Elemente oder Unterkomponenten zu registrieren. Bei Verwendung auf einem normalen DOM-Element werden die Referenzinformationen auf das DOM-Element registriert Bei einer Unterkomponente verweist der Verweis auf die Komponenteninstanz.
Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.
$refs in Vue
$refs ist ein Objekt, das alle DOM-Elemente und Komponenteninstanzen enthält, die mit dem ref-Attribut registriert sind.
Description
ref wird verwendet, um Referenzinformationen für Elemente oder Unterkomponenten zu registrieren. Die Referenzinformationen werden im $refs-Objekt der übergeordneten Komponente registriert Referenz verweist auf Es handelt sich um ein DOM-Element.
Bei Verwendung auf einer untergeordneten Komponente verweist die Referenz auf die Komponenteninstanz.
-
Außerdem, wenn v-for auf einem Element oder einer Komponente verwendet wird wird ein Array sein, das den DOM-Knoten oder die Komponenteninstanz enthält. [Verwandte Empfehlungen:
vuejs-Video-Tutorial ,
]<!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app">
<div ref="node">Node</div>
<layout-div ref="layout"></layout-div>
<div v-for="i in 3" :key="i" ref="nodearr">{{i}}</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
Vue.component("layout-div", {
data: function(){
return {
count: 0
}
},
template: `<div>
<div>{{count}}</div>
</div>`
})
var vm = new Vue({
el: '#app',
mounted: function(){
console.log(this.$refs.node); // <div>Node</div> // DOM元素
console.log(this.$refs.layout); // VueComponent {_uid: 1, ...} // 组件实例
console.log(this.$refs.nodearr); // (3) [div, div, div] // DOM元素数组
}
})
</script>
</html>Da die Referenz selbst als Rendering-Ergebnis erstellt wird, kann beim ersten Rendering nicht darauf zugegriffen werden, da sie noch nicht existiert, und $refs Es ist noch nicht reaktiv, daher sollten Sie nicht versuchen, es für die Datenbindung in Vorlagen zu verwenden. Beim Initialisieren des Zugriffs auf ref sollte es in der gemounteten Methode seines Lebenszyklus aufgerufen werden Die Rückrufoperation sollte in der $nextTick-Methode übergeben werden. Darüber hinaus wird im Allgemeinen nicht empfohlen, DOM-Elemente direkt zu bedienen. Versuchen Sie, das ViewModel von MVVM zu verwenden. <!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: function(){
return {
msg: 0
}
},
template: `<div>
<div ref="node">{{msg}}</div>
<button @click="updateMsg">button</button>
</div>`,
beforeMount: function(){
console.log(this.$refs.node); // undefined
},
mounted: function(){
console.log(this.$refs.node); // <div>0</div>
},
methods: {
updateMsg: function(){
this.msg = 1;
console.log(this.$refs.node.innerHTML); // 0
this.$nextTick(() => {
console.log(this.$refs.node.innerHTML); // 1
})
}
}
})
</script>
</html>
Die grundlegende Verwendung von $refs in VUE
ref hat drei Verwendungszwecke:
1. ref wird zu gewöhnlichen Elementen hinzugefügt, die durch Verwendung von this.$refs. (Ref-Wert) erhalten werden ist ein Dom-Element
2. Fügen Sie ref zur Unterkomponente hinzu, verwenden Siethis.$refs (Ref-Wert), um die
Komponenteninstanz zu erhalten, und Sie können alle Methoden der Komponente verwenden. Wenn Sie die Methode verwenden, können Sie sie direkt verwenden this.$refs.(ref value).method(). 3. So verwenden Sie v-for und ref, um eine Reihe von Arrays oder Dom-Knoten zu erhalten Fallstricke, die beachtet werden sollten:
1 Wenn Sie verschiedene Refs über v-for-Traversal hinzufügen möchten, denken Sie daran um
: Zahl hinzuzufügen, das heißt :ref = eine Variable
;Dies ist dasselbe wie bei anderen Attributen, wenn es sich um einen festen Wert handelt , es ist nicht erforderlich, das
: code><span style="color:#f33b45;">-Zeichen hinzuzufügen. Wenn es sich um eine Variable handelt, denken Sie daran, das <code>:号，即 :ref =某变量 ;
这点和其他属性一样，如果是固定值就不需要加 :号，如果是变量记得加 :号。（加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串常量（String））
2、通过 :ref =某变量 添加ref（即加了:号） ,如果想获取该ref时需要加 [0]，如this.$refs[refsArrayItem] [0]；如果不是:ref =某变量的方式而是 ref =某字符串时则不需要加，如this.$refs[refsArrayItem]。:-Zeichen hinzuzufügen. (Mit einem Doppelpunkt bedeutet dies, dass das, was folgt, eine Variable oder ein Ausdruck ist; wenn kein Doppelpunkt vorhanden ist, bedeutet dies die entsprechende Zeichenfolgenkonstante (String))
2 Fügen Sie durch 
:ref = eine Variablehinzu >
: Nummer hinzu). Wenn Sie die Referenz erhalten möchten, müssen Sie [0] hinzufügen, z. B. this.$refs[refsArrayItem ] [0]; Wenn es nicht :ref = eine bestimmte Variable ist, sondern ref = eine bestimmte Zeichenfolge , dann muss nichts hinzugefügt werden, z. B. this.$refs[refsArrayItem].
1. ref muss
sein, nachdem das Dom-Rendering abgeschlossen ist. Stellen Sie bei der Verwendung sicher, dass das Dom gerendert wurde. Rufen Sie beispielsweise im Lebenszyklus-Hook
montiert(){} auf, oder
rufen Sie
in diesem auf.$nextTick(()=>{}). 2. Wenn ref in einer Schleife ausgeführt wird und
mehrere doppelte Namen hat, ist der Wert von ref ein Array. Um einen einzelnen Ref zu erhalten, müssen Sie zu diesem Zeitpunkt nur eine Schleife durchführen.
Beispiel 1:Ref-Attribut hinzufügen
<div id="app">
<h1 ref="h1Ele">这是H1</h1>
<hello ref="ho"></hello>
<button @click="getref">获取H1元素</button>
</div>Alle Komponenten oder Elemente mit ref registrieren
methods: {
getref() {
// 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素或组件
console.log(this.$refs.h1Ele.innerText);
this.$refs.h1ele.style.color = 'red';// 修改html样式
console.log(this.$refs.ho.msg);// 获取组件数据
console.log(this.$refs.ho.test);// 获取组件的方法
}
}Beispiel 2:🎜Vue-Code: 🎜 <!-- 列表部分 -->
<el-table @sort-change="sortChange" ref="multipleSelection" border :data="valueDryGoodTableData" style="width: 100%">
<el-table-column align="left" prop="title" label="标题" min-width="80%" sortable="custom">
<template slot-scope="scope">
<a target="_blank" :class="scope.row.titleClicked?'titleClicked':''" class="hoverHand bluetext" v-html="scope.row.title" @click="titleClick(scope.row.articleUrl,scope.$index)">
</a>
</template>
</el-table-column>
<el-table-column align="left" prop="releaseTime" label="发布日期" min-width="11%" sortable="custom"></el-table-column>
<el-table-column align="center" label="操作" min-width="9%">
<template slot-scope="scope">
<span class="operatoryTools">
<i title="取消收藏" v-if="scope.row.isFavour" @click="favoriteOperating(scope.row.id, scope.$index)" class="hoverHand iconStyle el-icon-star-on"></i>
<i title="收藏" v-else @click="favoriteOperating(scope.row.id, scope.$index)" class="hoverHand iconStyle el-icon-star-off"></i>
<i title="分享" @click.stop="showShareOperation(scope.$index)" class="shareTarg iconfont"></i>
<div class="share" v-if="scope.row.showShare">
<img class="hoverHand shareItem" title="分享到微博" @click="shareItem('sina',$event);" src="@/images/WEIBO.png">
<img class="hoverHand shareItem" title="分享到微信" @click.stop="shareItem('wx',$event);" src="@/images/WEIXIN.png">
<img class="hoverHand shareItem" title="分享到QQ" @click="shareItem('qq',$event);" src="@/images/QQ.png">
</div>
<div v-show="scope.row.erweimaShare" class="erweima_share"></div>
<div v-show="scope.row.erweimaShare1" class="erweima_share1"></div>
</span>
</template>
</el-table-column>
</el-table>🎜JS-Code: 🎜//点击清空条件，调用该方法
emptyAndSearch(){//清空条件方法
//清空树选中状态
this.clearTreeNodeCheck(['tree']);
//清除排序
this.$refs.multipleSelection.clearSort();
//设置分页参数
this.queryParam = {
startRow : 1,
pageSize : 20,
condition:{
}
}
//分页查询调用
this.confirmSearch('statistics');
//设置清空条件为false
this.$store.commit('valueDryGoodDatas/SET_CLEAR_ALL',false);
} 🎜🎜Beispiel 3: 🎜 🎜🎜Vue-Code: 🎜 <el-form-item
ref="goodPicInfoFormpicUrl"
:label="$t('许可证证照')"
class="is-required"
prop="picUrl">
<el-upload
:show-file-list="false"
:http-request="uploadImg"
:data="certImgform"
action=""
class="avatar-uploader">
<img
v-if="queryFrom.picUrl"
:src="queryFrom.picUrl"
class="avatar">
<i
v-else
class="el-icon-plus avatar-uploader-icon"/>
</el-upload>
<el-button
type="primary"
plain
size="mini"
@click="viewPcPic(queryFrom.picUrl)">{{ $t('查看') }}</el-button>
</el-form-item>🎜JS-Code: 🎜 //获取元素清除验证
this.$refs.goodPicInfoFormpicUrl.clearValidate()🎜 Wenn Sie das INPUT-Feld erhalten möchten, rufen Sie im Allgemeinen zuerst das DOM-Element ab. Sie benötigen document.querySelector („.input1“), um den DOM-Knoten abzurufen, und Holen Sie sich dann den Wert von Eingabe1. 🎜Aber nach der Bindung mit ref müssen wir den Dom-Knoten nicht mehr abrufen. Wir können input1 direkt an die obige Eingabe binden und ihn dann in $refs aufrufen.
Dann rufen Sie dies in Javascript auf: this.$refs.input1 Dies kann den Verbrauch beim Abrufen von Dom-Knoten reduzieren
(Freigabe von Lernvideos: Vuejs-Einführungs-Tutorial, Video zur grundlegenden Programmierung)
Das obige ist der detaillierte Inhalt vonWas bedeutet $refs in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Teilen Sie eine VUE-Seitenton- und Titel-Flash-Benachrichtigungskomponente (mit Gebrauchsanweisungen)
- Lassen Sie uns über die 38 Toolfunktionen unter dem gemeinsam genutzten Vue3-Modul sprechen (Lesen des Quellcodes).
- Warum verwendet Vue asynchrone Komponenten?
- Ist das Rendern von Vue-Seiten synchron oder asynchron?
- Vue3-Lernen: Lassen Sie uns über die Verwendung boolescher Operationen in Komponenten sprechen