Les composants enfants de Vue ne peuvent pas accéder aux données et aux méthodes des composants parents en utilisant this.$parent

avant-propos

• Récemment, lors de l'utilisation de composants parent-enfant, les données et les méthodes du composant parent sont accessibles via this.$parent, et undefined se produit.

• Le scénario réel est que le composant parent a une boîte de dialogue contextuelle, qui contient plusieurs formulaires de formulaire de sous-composant, et un seul sous-composant est affiché en fonction du logo.

• Le composant enfant doit transmettre un ID aux données du composant parent. Pensez à this.$parent (relativement simple), et ne voulez pas utiliser this.$emit.

• Mais on constate que l'instance this.$parent est imprimée, mais les données et les méthodes d'accès au composant parent ne sont pas définies

Solutions

• Après avoir recherché l'instance this.$parent, j'ai constaté qu'il n'y avait aucune donnée ni méthode du composant parent, et qu'il ne s'agissait pas d'une instance du composant parent.

• Étant donné qu'une couche de boîte de dialogue contextuelle est enveloppée à l'extérieur du composant enfant, this.$parent est l'instance de l'élément et this.$parent.$parent est l'instance du composant parent.

• Les sous-composants peuvent accéder directement aux méthodes de données via this.$parent lorsqu'il n'y a pas de package dans <template></template>

• Lorsque le sous-composant est enveloppé avec une boîte de dialogue contextuelle, accédez aux données et aux méthodes via this.$parent.$parent (selon la situation réelle, le nombre de couches enveloppées)

exemple de code

// 没有任何包裹是子组件访问父组件
const parent = this.$parent
// 访问数据
parent.数据
// 访问方法
parent.方法
​
// 子组件被包裹时（比如dialog弹出框包裹时）
const parent = this.$parent.$parent
// 访问数据
parent.数据
// 访问方法
parent.方法

---

Résumer:

Après ce processus, je pense que vous avez une première impression profonde que le sous-composant Vue ne peut pas accéder aux données et aux méthodes du composant parent en utilisant this.$parent, mais la situation que nous rencontrons dans le développement réel doit être différente, nous devons donc comprendre son principe, et c'est toujours le même. Allez, frappez les ouvriers !

Veuillez signaler toute lacune, merci -- Fengguowuhen