Parfois, nous avons besoin du composant parent pour accéder directement au composant enfant, du composant enfant pour accéder directement au composant parent ou du composant enfant pour accéder au composant racine.
Résumé de la méthode:
- Le composant parent accède au composant enfant:
$childrenou$refs - Composant parent d'accès au composant enfant:
$parent - Les composants enfants accèdent au composant racine (l'instance racine de Vue créée par la nouvelle Vue):
$root
Voici une démonstration détaillée:
1. Le composant parent accède au composant enfant
1.1 Utiliser $ children
Dans les composants parents utilisés this.$childrenpour obtenir un type de tableau, il contient toutes les instances de sous-composant.
<div id="app">
<cpn></cpn>
<cpn></cpn>
<button @click="btnClick">按钮</button>
</div>
<template id="cpn">
<div>
<h1>我是子组件</h1>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
},
methods: {
btnClick() {
//1.拿到所有子组件，是一个数组
console.log(this.$children);
//2.拿到一个组件实例，可以直接访问子组件中的方法和 data 中的数据
this.$children[0].showMessage();
console.log(this.$children[0].name);
}
},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: 'webchang'
}
},
methods: {
showMessage() {
console.log('我是子组件');
}
}
}
}
});
</script>
1.2 Utiliser $ refs
$children Défauts:
- En
$childrenaccédant au sous-assemblage, il s'agit d'un type de tableau, dans lequel l'accès via la valeur d'index doit être sous-assemblage. - Mais lorsqu'il y a trop de sous-composants et que nous devons en obtenir un, nous ne pouvons souvent pas déterminer sa valeur d'indice, et peut même changer.
- Parfois, nous voulons obtenir explicitement l'un des composants spécifiques, cette fois nous pouvons utiliser
$refs
$refs l'utilisation de:
$refsEt lesrefinstructions sont généralement utilisées ensemble.- Tout d'abord, nous ajoutons un sous-assemblage sur la
refpropriété, ce qui équivaut à un sous-composant lié à un ID particulier. - Deuxièmement,
this.$refspour obtenir tous les sous-composants étiquetés avec l'attribut ref (si aucune instance d'un attribut ref de sous-assemblage, ne peut pas obtenir de cette manière) et obtenir une cible finale , le nom de la propriété est un exemple d'attribut ref de sous-assemblage, la valeur d'attribut est l'instance du composant. - By
this.$refs.IDpeut accéder au composant.
<div id="app">
<cpn ref="child1"></cpn>
<cpn ref="child2"></cpn>
<!-- 这个子组件实例没有 ref 属性，通过 this.$refs 方式拿不到这个组件实例 -->
<cpn></cpn>
<button @click="btnClick">按钮</button>
</div>
<template id="cpn">
<div>
<h1>我是子组件</h1>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
message: "hello"
},
methods: {
btnClick() {
console.log(this.$refs);
console.log(this.$refs.child1);
console.log(this.$refs.child1.name);
this.$refs.child1.showMessage();
}
},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: 'webchang'
}
},
methods: {
showMessage() {
console.log('我是子组件');
}
}
}
}
});
</script>
Le résultat est montré dans la figure:
2. Le Fils rend visite au Père
2.1 Utiliser $ parent
Si nous voulons accéder directement au composant parent dans le composant enfant, nous pouvons passer $parent
Précautions:
- Bien que le développement Vue, nous permette
$parentd'accéder au composant parent, mais essayez de ne pas le faire en développement réel. - Les composants enfants doivent essayer d'éviter d'accéder directement aux données du composant parent, car le couplage est trop élevé.
- Si nous mettons le composant enfant dans un autre composant, il est probable que le composant parent n'ait pas de propriétés correspondantes, ce qui pose souvent des problèmes.
- De plus, ce n'est pas en
$parentmodifiant directement le composant parent de l'état, alors l'état deviendra le composant parent erratique, très propice à ma mise en service et à ma maintenance.
2.2 Utiliser $ root
L'utilisation $rootest accessible directement aux instances racine de Vue
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h1>我是子组件的标题</h1>
<button @click="btnClick">我是子组件的按钮</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
},
components: {
cpn: {
template: '#cpn',
methods: {
btnClick() {
console.log(this.$parent);
console.log(this.$root);
}
}
}
}
});
</script>
Dans ce code, le composant parent du composant enfant se trouve être l'instance racine de Vue
