Les composants définis dans le composant vue ne sont pas accessibles

Dans le développement de Vue, nous utilisons généralement des composants pour encapsuler certaines fonctions réutilisables. Parfois, nous pouvons rencontrer une situation dans laquelle les composants définis dans le composant sont inaccessibles, ce qui nous pose souvent des problèmes. Cet article expliquera en détail pourquoi les composants définis dans le composant Vue sont inaccessibles et comment résoudre ce problème.

1. Raison

Les données, méthodes, hooks de cycle de vie, etc. des composants Vue sont tous encapsulés dans la portée du composant, et il en va de même pour les composants définis dans le composant. Par conséquent, les composants définis à l’intérieur d’un composant ne sont pas directement accessibles à l’extérieur du composant.

Par exemple, dans l'exemple ci-dessous, nous définissons un composant parent et un composant enfant et introduisons le composant enfant dans le composant parent :

// 父组件
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'; // 引入子组件

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent // 注册子组件
  }
}
</script>

// 子组件
<template>
  <h1>这是子组件</h1>
</template>

<script>
export default {
  name: 'ChildComponent',
}
</script>

Cependant, si nous accédons directement au composant enfant en dehors du composant enfant, par exemple :

console.log(ChildComponent);

À ce moment, undefined sera affiché, indiquant que le sous-composant n'est pas accessible. En effet, les composants enfants ne peuvent être reconnus et accessibles que dans la portée du composant parent, et les composants enfants ne sont pas exposés à la portée globale.

2. Solution

Alors, comment rendre les composants définis dans le composant parent accessibles en dehors du composant ? Voici deux méthodes possibles :

2.1. Utilisation de $refs

Dans les composants Vue, chaque composant a un identifiant unique $refs, qui peut être utilisé pour accéder au composant ou à l'élément DOM. Par conséquent, nous pouvons obtenir le composant enfant via $refs dans le composant parent pour accéder aux composants à l'intérieur du composant enfant.

Modifiez l'exemple de code ci-dessus, ajoutez un bouton dans le composant parent et accédez au sous-composant via $refs dans l'événement click du bouton :

// 父组件
<template>
  <div>
    <child-component></child-component>
    <button @click="accessChildComponent">访问子组件</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'; // 引入子组件

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent // 注册子组件
  },
  methods: {
    accessChildComponent() {
      console.log(this.$refs.childComponent.$children) // 访问子组件内部组件
    }
  }
}
</script>

// 子组件
<template>
  <div ref="childComponent">
    <h1>这是子组件</h1>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  components: {
    SubComponent: {
      name: 'SubComponent',
      template: '<div>这是子组件内部组件</div>'
    }
  }
}
</script>

Dans le code ci-dessus, nous ajoutons un attribut ref au sous-composant afin qu'il puisse être Monté sur l'attribut $refs du composant parent. Ensuite, en cas de clic du composant parent, nous accédons à l'objet composant enfant via $refs.childComponent et obtenons les composants à l'intérieur de l'objet composant enfant via la propriété $children.

2.2. Utiliser les mixins

En plus de $refs, Vue propose également un concept de mixins. Les mixins peuvent fournir des extraits de logique ou de code communs pour les composants, améliorant ainsi la réutilisabilité du code. Par conséquent, nous pouvons exposer les composants à l’intérieur du composant enfant au composant parent via des mixins.

Modifiez l'exemple de code ci-dessus, définissez un mixins dans le sous-composant et exposez les composants à l'intérieur du sous-composant à la portée globale dans les mixins :

// 父组件
<template>
  <div>
    <button @click="accessChildComponent">访问子组件</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'; // 引入子组件

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent // 注册子组件
  },
  methods: {
    accessChildComponent() {
      console.log(window.$SubComponent) // 访问子组件内部组件
    }
  }
}
</script>

// 子组件
<template>
  <h1>这是子组件</h1>
</template>

<script>
const SubComponent = {
  name: 'SubComponent',
  template: '<div>这是子组件内部组件</div>'
}

export default {
  name: 'ChildComponent',
  mixins: [{
    created() {
      window.$SubComponent = SubComponent
    }
  }]
}
</script>

Dans le code ci-dessus, nous définissons un mixins dans le sous-composant, en utilisant Pour exposer le composants à l’intérieur du sous-composant à la portée globale. Plus précisément, nous définissons l'objet SubComponent comme une constante et le montons sur la propriété $SubComponent de la portée globale dans le hook de mixins créé. Ensuite, dans le composant parent, nous pouvons accéder aux composants à l'intérieur du sous-composant via window.$SubComponent.

3. Résumé

Il existe deux façons ci-dessus de résoudre le problème des composants inaccessibles définis dans les composants Vue, qui consistent à utiliser $refs et mixins. Les $refs conviennent pour accéder directement aux composants à l'intérieur du composant enfant dans le composant parent, tandis que les mixins conviennent pour exposer les composants à l'intérieur du composant enfant à la portée globale. Pour des besoins spécifiques, nous pouvons choisir la solution appropriée en fonction de la situation réelle.

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!