Dans vue, $refs est un objet qui contient tous les éléments DOM et instances de composants enregistrés avec l'attribut ref. ref est utilisé pour enregistrer les informations de référence pour les éléments ou les sous-composants. Les informations de référence seront enregistrées sur l'objet "$refs" du composant parent si elles sont utilisées sur un élément DOM normal, la référence pointe vers l'élément DOM si elle est utilisée. sur un sous-composant, la référence pointe vers l'instance du composant.
L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.
$refs dans Vue
$refs est un objet qui contient tous les éléments DOM et instances de composants enregistrés avec l'attribut ref.
Description
ref est utilisée pour enregistrer les informations de référence pour les éléments ou les sous-composants. Les informations de référence seront enregistrées sur l'objet $refs du composant parent
Si elles sont utilisées sur un élément DOM normal, le. la référence pointe vers Il s'agit d'un élément DOM ;
Si elle est utilisée sur un composant enfant, la référence pointe vers l'instance du composant
De plus, lorsque v-for est utilisé sur un élément ou un composant, les informations de référence ; sera un tableau contenant le nœud DOM ou l'instance de composant. [Recommandations associées : tutoriel vidéo vuejs, développement web front-end]
<!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>Étant donné que la référence elle-même est créée en tant que résultat du rendu, elle n'est pas accessible lors du rendu initial car elle n'existe pas encore, et $refs n'existe pas encore. Il n'est pas réactif, vous ne devez donc pas essayer de l'utiliser pour la liaison de données dans les modèles. Lors de l'initialisation de l'accès à ref, il doit être appelé dans la méthode montée de son cycle de vie. L'opération de rappel doit être passée dans la méthode $nextTick. Pour obtenir des éléments ou des instances, il n'est généralement pas recommandé d'utiliser directement les éléments du DOM. Essayez d'utiliser la liaison de données pour laisser le ViewModel de MVVM exploiter le DOM.
<!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>Utilisation de base de $refs dans VUE
ref a trois utilisations :
1. ref est ajouté aux éléments ordinaires, obtenus par this.$refs (valeur de référence) C'est un. dom element
2. Ajoutez une référence au sous-composant, utilisez this.$refs (valeur de référence) pour obtenir l'instance du composant , et vous pourrez utiliser toutes les méthodes du composant . Lorsque vous utilisez la méthode, vous pouvez l'utiliser directement this.$refs.(ref value).method().
3. Comment utiliser v-for et ref pour obtenir un ensemble de tableaux ou de nœuds dom
1 Si vous souhaitez ajouter différentes références via la traversée v-for, n'oubliez pas. pour ajouter ::号，即 :ref =某变量 ;
这点和其他属性一样，如果是固定值就不需要加 :号，如果是变量记得加 :号。（加冒号的，说明后面的是一个变量或者表达式；没加冒号的后面就是对应的字符串常量（String））
2、通过 :ref =某变量 添加ref（即加了:号） ,如果想获取该ref时需要加 [0]，如this.$refs[refsArrayItem] [0]；如果不是:ref =某变量的方式而是 ref =某字符串时则不需要加，如this.$refs[refsArrayItem]。 nombre, c'est-à-dire :ref = une variable
:</ code><img alt="" class="has" src="https://img.php.cn/upload/article/000/000/024/0ccbe7fd762ab3db91a6278d0769ee7f-0.png"/>, s'il s'agit d'une variable, pensez à ajouter le signe </p><code>:
. (Avec un deux-points, cela signifie que ce qui suit est une variable ou une expression ; s'il n'y a pas de deux-points, cela signifie la constante de chaîne correspondante (String)) 2 Ajoutez via :ref = une variable</code. ></span> ref (c'est-à-dire ajouter <span style="color:#f33b45;"><code>: numéro), si vous souhaitez obtenir la référence, vous devez ajouter [0], tel que this.$refs[refsArrayItem ] [0]; Si ce n'est pas le cas :ref = une certaine variable mais
ref = une certaine chaîne , alors il n'est pas nécessaire d'ajouter, comme this.$refs[refsArrayItem].
Exemple 1 :
Ajouter un attribut ref🎜<div id="app">
<h1 ref="h1Ele">这是H1</h1>
<hello ref="ho"></hello>
<button @click="getref">获取H1元素</button>
</div>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()Mais après la liaison avec ref, nous n'avons plus besoin d'obtenir le nœud dom. Nous pouvons directement lier input1 à l'entrée ci-dessus, puis l'appeler dans $refs.
Ensuite, appelez-le comme ceci en javascript : this.$refs.input1 Cela peut réduire la consommation d'obtention de nœuds dom
(Partage de vidéos d'apprentissage : Tutoriel d'introduction à vuejs, Vidéo de programmation de base)
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Le composant parent Vue appelle la méthode du composant enfant
vue v-si
La différence entre vue2.0 et 3.0
Comment transmettre une valeur au composant vue
La différence entre vue3.0 et 2.0
vue instructions communes
Quelles sont les instructions couramment utilisées dans vue ?
La différence entre mpvue et vue
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
