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><!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:</ 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 Variable</code hinzu ></p> Referenz (d. h. fügen Sie <p><code>: 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
montiert(){} auf, oder
rufen Sie
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:<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);// 获取组件的方法
}
} <!-- 列表部分 -->
<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>//点击清空条件，调用该方法
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);
} <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> //获取元素清除验证
this.$refs.goodPicInfoFormpicUrl.clearValidate()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!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
