Kommunikation zwischen Komponenten in Vue.js – dynamische Komponenten

Dieses Mal bringe ich Ihnen die Kommunikation zwischen Komponenten von Vue.js – dynamische Komponenten, die Kommunikation zwischen Komponenten mithilfe von Vue.js – dynamische Komponenten Was ist zu beachten , das Folgende sind praktische Fälle, lasst uns Schauen Sie mal rein.

Durch die Verwendung des reservierten -Elements und die dynamische Bindung seines is-Attributs können Sie mehrere Komponenten am selben Mount-Punkt dynamisch wechseln:

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

<component v-bind:is="currentView">
  <!-- 组件在 vm.currentview 变化时改变！ -->
</component>

Sie können auch binden es direkt an das Komponentenobjekt:

var Home = {
  template: &#39;<p>Welcome home!</p>&#39;
}
var vm = new Vue({
  el: &#39;#example&#39;,
  data: {
    currentView: Home
  }
})

Keep-Alive

Wenn Sie die umgeschaltete Komponente im Speicher behalten, können Sie ihren Zustand beibehalten oder ein erneutes Rendern vermeiden . Zu diesem Zweck können Sie einen Keep-Alive-Befehlsparameter hinzufügen:

<keep-alive>
  <component :is="currentView">
    <!-- 非活动组件将被缓存！ -->
  </component>
</keep-alive>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Berechnete Eigenschaften und Datenüberwachung von Vue.js

Ereignisbindung von Vue.js – Formular Ereignisbindung

Das obige ist der detaillierte Inhalt vonKommunikation zwischen Komponenten in Vue.js – dynamische Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!