Comment obtenir dom dans vue.js-Voir.js-php.cn

Comment obtenir dom dans vue.js

coldplay.xixi

Libérer： 2020-11-10 11:02:57

original

2763 Les gens l'ont consulté

Méthode Vue.js pour obtenir le DOM : 1. Définissez l'attribut ref dans la paire de balises d'origine ou le sous-composant en HTML, et utilisez [this.$refs] après la méthode [mount(){}] pour obtenir l'élément DOM ;2. Mounted continue d'utiliser [this.$refs] après avoir modifié le contenu du composant.

Comment obtenir dom dans vue.js

[Articles connexes recommandés : vue.js]

vue.js pour obtenir Méthode dom :

Définissez l'attribut ref dans la paire de balises d'origine ou le sous-composant en HTML, utilisez this.$refs dans la méthode Mounted(){} ou après cela méthode. Plus précisément, la valeur ref est utilisée pour obtenir l'élément DOM. Car lors de l'utilisation de la fonction hook précédente de Mounted, le composant n'a pas été monté sur le DOM, il est donc naturellement impossible d'obtenir les éléments sur le DOM via
Quels sont les besoins ; à distinguer est l'impression de cette valeur de référence spécifique .$refs. S'il s'agit d'une paire de balises d'origine, le résultat de sortie est la paire de balises d'origine. Si l'attribut ref est dans une balise de sous-composant, la sortie est l'objet composant. , pas le contenu du modèle correspondant du composant ;
this.$refs génère une collection de balises ou de sous-composants avec des attributs ref définis dans le composant actuel
pendant le processus de rendu du composant, comme continuer à utiliser
après avoir modifié le contenu du composant lors du montage. La référence correspondant au composant modifié est obtenue à ce moment-là. Afin d'obtenir l'élément DOM après modification, vous devez utiliser la méthode this.$nextTick (), et utiliser this.$refs dans la fonction de rappel de cette méthode. À ce stade, l'élément DOM modifié est obtenu. Bien sûr, vous pouvez obtenir les éléments DOM modifiés sous la fonction mise à jour, mais dans certains scénarios spécifiques, vous devez obtenir les éléments DOM modifiés montés this.$refs

<!DOCTYPE html>
<html>
<head>
<meta charset=&#39;utf-8&#39;>
<title>Vue组件中获取DOM元素的方式之$refs的使用</title>
</head>
<body>
<div id=&#39;app&#39;></div>
<script type=&#39;text/javascript&#39; src=&#39;node_modules/vue/dist/vue.js&#39;></script>
<script type=&#39;text/javascript&#39;>
Vue.component(&#39;Btn&#39;,{
template:`
<button>我是按钮</button>
`
})
let App = {
data:function() {
return {
isShow:false
}
},
template:`
<div>
<input type=&#39;text&#39; ref=&#39;input1&#39;/>
<input type=&#39;text&#39; ref=&#39;input2&#39; v-show=&#39;isShow&#39;/>
<Btn ref=&#39;btn1&#39;/>
</div>
`,
//对应输出结果为下面第一张图
// mounted:function() {
// console.log(this.$refs)
// console.log(this.$refs.input1)
// console.log(this.$refs.input2)
// console.log(this.$refs.btn1)
// }
mounted:function() {
// 修改ref=input2的v-show值，让其显示, 接着获取该DOM并让其获得焦点,但是没法获得焦点，这是因为mounted内无法获得更新DOM后的DOM元素，这个时候需要调用this.$nextTick方法，在其回掉函数中重新执行代码this.$refs.input2.focus()
this.isShow = true
// this.$refs.input2.focus()
this.$nextTick(function() {
this.$refs.input2.focus()
})
},
}
let  vm = new Vue({
el:&#39;#app&#39;,
data:function() {
return {
}
},
components:{
App
},
template:`
<App/>
`
})
</script>
</body>
</html>

Copier après la connexion

correspond au monté annoté ; Le contenu dans

Comment obtenir dom dans vue.js

L'utilisation de this.$nextTick en monté permet d'obtenir l'élément DOM mis à jour en monté. Laissez l'élément DOM mis à jour se concentrer dans ce code

Comment obtenir dom dans vue.js