Les trois boutons du composant parent peuvent appeler les trois méthodes de chargement du sous-composant pour effectuer différentes opérations. Cet article présente principalement comment Vue utilise ref pour permettre au composant parent d'appeler le composant enfant. J'espère que cela pourra aider tout le monde.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="vue.js" charset="utf-8"></script>
</head>
<body>
<p id="app">
<loading ref='load'></loading>
<button type="button" @click='show'>显示</button>
<button type="button" @click='hide'>隐藏</button>
<button type="button" @click='changeColor'>变色</button>
</p>
</body>
<script type="text/javascript">
let loading = {
data() {
return {
flag: true
}
},
template: '<p v-show="flag">loading...</p>',
methods: {
hide() {
this.flag = false
},
show() {
this.flag = true
}
}
}
let vm = new Vue({
el: '#app',
components: {
loading
},
methods: {
// 在组件上的ref获取组件实例
// 标签的ref 获得标签的dom
// 使用refs 获取组件实例，然后调用组件的方法即可
hide() {
this.$refs.load.hide()
},
show() {
this.$refs.load.show()
},
changeColor() {
// 获取dom实例 操作样式
this.$refs.load.$el.style.background = 'red'
}
}
})
</script>
</html>Recommandations associées :
Le composant parent dans les appels de vue.js l'enfant Méthode interne de partage des composants
Le sous-composant Vuejs2.0 appelle la méthode du composant parent
Vue2.0 sur la relation entre parent et sous-composants Émission et réception d'événements
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
Introduction aux composants Laravel
Le dossier appdata peut-il être supprimé ?
Exigences de configuration de l'ordinateur de programmation Python
Client Bitcoin
Logiciel de connexion à distance populaire
La visionneuse d'images Windows ne peut pas afficher une mémoire insuffisante
Que diriez-vous du processeur n5095
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
