Es gibt drei Verwendungsmöglichkeiten von ref:
1. Fügen Sie ref zu gewöhnlichen Elementen hinzu und verwenden Sie this.$refs.(ref value), um DOM-Elemente abzurufen
2. Die Referenz wird zur untergeordneten Komponente hinzugefügt und die Komponenteninstanz wird mithilfe von this.refs (Referenzwert) abgerufen, und alle Methoden der Komponente können verwendet werden. Wenn Sie die Methode verwenden, ruft this.refs. (Ref-Wert) direkt die Komponenteninstanz ab und Sie können alle Methoden der Komponente verwenden. Bei Verwendung der Methode erhält this.refs. (Ref-Wert) direkt die Komponenteninstanz und alle Methoden der Komponente können verwendet werden. Bei Verwendung der Methode kann direkt this.refs.(ref value).method() verwendet werden.
3. So verwenden Sie v-for und ref, um eine Reihe von Array- oder Dom-Knoten zu erhalten
Fallstricke, die beachtet werden sollten:
1. Wenn Sie durch v-for Traversal einen anderen Ref hinzufügen möchten, denken Sie daran, das :-Zeichen hinzuzufügen, das heißt: ref = eine Variable; dies ist dasselbe wie bei anderen Attributen, wenn es sich um ein festes
handelt Wert, Sie müssen das :-Zeichen nicht hinzufügen. Wenn es sich um eine Variable handelt, denken Sie daran, das :-Zeichen hinzuzufügen. (Der mit einem Doppelpunkt zeigt an, dass es sich bei dem Folgenden um eine Variable oder einen Ausdruck handelt; der ohne Doppelpunkt ist die entsprechende Zeichenfolgenkonstante (String))
2. Fügen Sie ref über :ref = eine Variable hinzu (dh fügen Sie das Zeichen : hinzu). Wenn Sie den Ref erhalten möchten, müssen Sie [0] hinzufügen, z. B. this.refs [ refs Ein Array-Element ] [ 0 ]; wenn nicht: ref = Wenn die Methode einer bestimmten Variablen ref = eine bestimmte Zeichenfolge ist, muss sie nicht hinzugefügt werden, z. B. this . refs[refsArrayItem] [0]; So z. B. this.refs[refsArrayItem][ 0]; wenn es nicht so ist: ref=eine bestimmte Variable, sondern ref=eine bestimmte Zeichenfolge, besteht keine Notwendigkeit, es hinzuzufügen, wie zum Beispiel this.refs[refsArrayItem].
1. ref muss verfügbar sein, nachdem das Dom-Rendering abgeschlossen ist. Stellen Sie bei der Verwendung sicher, dass der Dom gerendert wurde. Rufen Sie es beispielsweise im Lifecycle-Hook mount(){} oder in this.$nextTick(()=>{}) auf.
2. Wenn die Referenz in einer Schleife ausgeführt wird und mehrere doppelte Namen vorhanden sind, ist der Wert der Referenz ein Array. Zu diesem Zeitpunkt müssen Sie nur eine Schleife durchlaufen, um eine einzelne Referenz zu erhalten.
Ref-Attribut hinzufügen
<div id="app">
<h1 ref="h1Ele">这是H1</h1>
<hello ref="ho"></hello>
<button @click="getref">获取H1元素</button>
</div>
获取注册过 ref 的所有组件或元素
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);// 获取组件的方法
}
}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代码：
//点击清空条件，调用该方法
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);
}Im Allgemeinen gilt: Wenn Sie das INPUT-Feld abrufen möchten, rufen Sie zuerst das DOM-Element ab. Sie benötigen document.querySelector ("".input1"), um den DOM-Knoten abzurufen, und dann den Wert von input1 abzurufen.
Aber nach der Bindung mit ref müssen wir den Dom-Knoten nicht abrufen, sondern einfach Eingabe1 an die obige Eingabe binden und ihn dann in $refs aufrufen.
Rufen Sie es dann in Javascript so auf: this.$refs.input1 Dies kann den Verbrauch beim Abrufen von Dom-Knoten reduzieren