Maison > Article > interface Web > Utilisez ref dans vue pour laisser le composant parent appeler le composant enfant
Utilisez ref dans vue pour laisser le composant parent appeler le composant enfant
- 亚连original
- 2018-06-06 17:22:202156parcourir
Cet article présente principalement comment vue utilise ref pour permettre au composant parent d'appeler le composant enfant. Les amis qui en ont besoin peuvent se référer au
Les trois boutons du composant parent peuvent
appeler. l'enfant Les trois méthodes de chargement des composants effectuent différentes opérations
<!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>Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.
Articles associés :
Explication détaillée de la façon d'implémenter vuex (tutoriel détaillé)
Comment implémenter le partage WeChat dans Moments et envoyer amis dans Vue
Comment créer une grande application d'une seule page avec vue.js
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!