Auf in der Vue-Komponente definierte Komponenten kann nicht zugegriffen werden

In der Vue-Entwicklung verwenden wir normalerweise Komponenten, um einige wiederverwendbare Funktionen zu kapseln. Manchmal kann es vorkommen, dass auf innerhalb der Komponente definierte Komponenten nicht zugegriffen werden kann, was häufig zu Problemen führt. In diesem Artikel wird ausführlich erläutert, warum auf die in der Vue-Komponente definierten Komponenten nicht zugegriffen werden kann und wie dieses Problem gelöst werden kann.

1. Grund

Die Daten, Methoden, Lebenszyklus-Hooks usw. von Vue-Komponenten sind alle im Umfang der Komponente gekapselt, und das Gleiche gilt für innerhalb der Komponente definierte Komponenten. Daher kann außerhalb der Komponente nicht direkt auf Komponenten zugegriffen werden, die innerhalb einer Komponente definiert sind.

Im folgenden Beispiel definieren wir beispielsweise eine übergeordnete Komponente und eine untergeordnete Komponente und führen die untergeordnete Komponente in die übergeordnete Komponente ein:

// 父组件
<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>

Wenn wir jedoch direkt auf die untergeordnete Komponente außerhalb der untergeordneten Komponente zugreifen, zum Beispiel:

console.log(ChildComponent);

Zu diesem Zeitpunkt wird undefiniert ausgegeben, was darauf hinweist, dass auf die Unterkomponente nicht zugegriffen werden kann. Dies liegt daran, dass untergeordnete Komponenten nur im Bereich der übergeordneten Komponente erkannt und darauf zugegriffen werden können und untergeordnete Komponenten nicht dem globalen Bereich ausgesetzt sind.

2. Lösung

Wie kann man also die in der übergeordneten Komponente definierten Komponenten außerhalb der Komponente zugänglich machen? Es gibt zwei mögliche Methoden:

2.1. Verwendung von $refs

In Vue-Komponenten verfügt jede Komponente über einen eindeutigen Bezeichner $refs, der für den Zugriff auf die Komponente oder das DOM-Element verwendet werden kann. Daher können wir die untergeordnete Komponente über $refs in der übergeordneten Komponente abrufen, um auf die Komponenten innerhalb der untergeordneten Komponente zuzugreifen.

Ändern Sie den obigen Beispielcode, fügen Sie eine Schaltfläche in der übergeordneten Komponente hinzu und greifen Sie über $refs im Klickereignis der Schaltfläche auf die Unterkomponente zu:

// 父组件
<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>

Im obigen Code fügen wir der Unterkomponente ein Ref-Attribut hinzu, damit dies möglich ist Wird an das $refs-Attribut der übergeordneten Komponente angehängt. Dann greifen wir im Click-Ereignis der übergeordneten Komponente über $refs.childComponent auf das untergeordnete Komponentenobjekt zu und erhalten die Komponenten innerhalb des untergeordneten Komponentenobjekts über die Eigenschaft $children.

2.2. Verwendung von Mixins

Zusätzlich zu $refs bietet Vue auch ein Konzept von Mixins. Mixins können einige allgemeine Logik- oder Codeausschnitte für Komponenten bereitstellen und so die Wiederverwendbarkeit von Code verbessern. Daher können wir die Komponenten innerhalb der untergeordneten Komponente über Mixins der übergeordneten Komponente zugänglich machen.

Ändern Sie den obigen Beispielcode, definieren Sie ein Mixin in der Unterkomponente und machen Sie die Komponenten innerhalb der Unterkomponente dem globalen Bereich in den Mixins zugänglich:

// 父组件
<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>

Im obigen Code definieren wir ein Mixin in der Unterkomponente, indem wir verwenden, um das verfügbar zu machen Komponenten innerhalb der Unterkomponente in den globalen Bereich. Konkret definieren wir das SubComponent-Objekt als Konstante und mounten es in der Eigenschaft $SubComponent des globalen Bereichs im erstellten Hook von Mixins. Dann können wir in der übergeordneten Komponente über window.$SubComponent auf die Komponenten innerhalb der Unterkomponente zugreifen.

3. Zusammenfassung

Die oben genannten sind zwei Möglichkeiten, das Problem der in Vue-Komponenten definierten unzugänglichen Komponenten zu lösen, bei denen es sich um die Verwendung von $refs und mixins handelt. $refs eignen sich für den direkten Zugriff auf die Komponenten innerhalb der untergeordneten Komponente in der übergeordneten Komponente, während Mixins dafür geeignet sind, die Komponenten innerhalb der untergeordneten Komponente dem globalen Bereich zugänglich zu machen. Für spezifische Anforderungen können wir basierend auf der tatsächlichen Situation die geeignete Lösung auswählen.

Das obige ist der detaillierte Inhalt vonAuf in der Vue-Komponente definierte Komponenten kann nicht zugegriffen werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!