Die übergeordnete Vue-Komponente ändert die Eigenschaften der untergeordneten Komponenten

In Vue ist die Datenkommunikation zwischen übergeordneten und untergeordneten Komponenten eine sehr häufige Anforderung. Die übergeordnete Komponente kann Daten über Requisiten an die untergeordnete Komponente weitergeben, und die untergeordnete Komponente kann die übergeordnete Komponente durch Ereignisse nach oben über Änderungen benachrichtigen. In einigen Fällen müssen wir jedoch einige Eigenschaften der untergeordneten Komponente in der übergeordneten Komponente ändern, was die Verwendung von $refs zum Betrieb der untergeordneten Komponente erfordert.

In Vue ist $refs eine Referenz, die auf Variablen oder Methoden innerhalb der untergeordneten Komponente in der übergeordneten Komponente zugreifen kann. Über $refs können wir die Instanz der Unterkomponente abrufen und ihre Methoden aufrufen oder ihre Eigenschaften ändern.

Nachfolgend sehen wir anhand eines Beispiels, wie die Eigenschaften einer untergeordneten Komponente über die übergeordnete Komponente geändert werden.

Zuerst müssen wir eine Unterkomponente definieren, die einen Attributnamen hat, und eine Methode setName zum Festlegen des Werts des Attributs bereitstellen.

<template>
  <div>
    <p>子组件的name属性为：{{ name }}</p>
  </div>
</template>

<script>
export default {
  name: 'Subcomponent',
  props: {
    name: {
      type: String,
      default: ''
    }
  },
  methods: {
    setName(value) {
      this.name = value;
    }
  }
}
</script>

Führen Sie als Nächstes die untergeordnete Komponente in die übergeordnete Komponente ein und verwenden Sie die untergeordnete Komponente in der Vorlage. Wir müssen auch das ref-Attribut für das Tag der untergeordneten Komponente festlegen, um auf die Instanz der untergeordneten Komponente in der übergeordneten Komponente zu verweisen.

<template>
  <div>
    <button @click="changeName">更改子组件name属性值</button>
    <subcomponent ref="mySubcomponent" :name="name"></subcomponent>
  </div>
</template>

<script>
import Subcomponent from './Subcomponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    Subcomponent
  },
  data() {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    changeName() {
      this.$refs.mySubcomponent.setName('React');
    }
  }
}
</script>

In der übergeordneten Komponente definieren wir eine Methode „changeName“, die die Instanz der Unterkomponente über $refs erhält und ihre setName-Methode aufruft, um das Namensattribut der Unterkomponente in „React“ zu ändern. Auf diese Weise können Sie nach dem Klicken auf die Schaltfläche auf der Seite sehen, dass das Namensattribut der Unterkomponente geändert wurde.

Im eigentlichen Projektentwicklungsprozess müssen wir häufig einige Eigenschaften untergeordneter Komponenten durch übergeordnete Komponenten ändern. Zu diesem Zeitpunkt werden $refs für uns zu einem sehr wichtigen Werkzeug. Wenn Unterkomponenten auf bestimmte Ereignisse reagieren müssen, können wir dies mithilfe von Ereignissen erreichen. Lassen Sie uns als Nächstes anhand eines kleinen Beispiels den Mechanismus besser verstehen, mit dem übergeordnete Komponenten die Eigenschaften untergeordneter Komponenten ändern.

<template>
  <div>
    <button @click="changeName">更改子组件name属性值</button>
    <subcomponent ref="mySubcomponent" :name="name" @changeName="handleChangeName"></subcomponent>
  </div>
</template>

<script>
import Subcomponent from './Subcomponent.vue';

export default {
  name: 'ParentComponent',
  components: {
    Subcomponent
  },
  data() {
    return {
      name: 'Vue.js'
    }
  },
  methods: {
    changeName() {
      this.$refs.mySubcomponent.setName('React');
    },
    handleChangeName(newName) {
      this.name = newName;
    }
  }
}
</script>

In diesem Beispiel haben wir einen @changeName-Ereignis-Listener zum Tag der untergeordneten Komponente hinzugefügt und eine handleChangeName-Methode in der übergeordneten Komponente definiert, um auf das Ereignis zu reagieren. Wenn $emit('changeName', newName) in der untergeordneten Komponente aufgerufen wird, wird die Methode handleChangeName in der übergeordneten Komponente aufgerufen und der übergebene neue Name wird dem Namensattribut zugewiesen. Auf diese Weise können Sie auch die Änderung des Namensattributwerts der Unterkomponente in Echtzeit auf der Seite sehen.

Im Allgemeinen ist es in Vue sehr praktisch, die Instanz der Unterkomponente über $refs abzurufen und ihre Eigenschaften zu ändern oder ihre Methoden aufzurufen. Durch die gemeinsame Verwendung von Ereignissen können wir die Funktion der übergeordneten Komponente realisieren, indem wir die Eigenschaften der untergeordneten Komponente ändern und so mehr Möglichkeiten für die Seiteninteraktion bieten.

Das obige ist der detaillierte Inhalt vonDie übergeordnete Vue-Komponente ändert die Eigenschaften der untergeordneten Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!