Communication entre les composants dans Vue.js - composants dynamiques

Cette fois je vous apporte la communication entre les composants de Vue.js - composants dynamiques, communication entre composants utilisant Vue.js - composants dynamiques Quelles sont les choses à noter , voici des cas pratiques, commençons jetez un oeil.

En utilisant l'élément réservé et en liant dynamiquement son attribut is, vous pouvez basculer dynamiquement plusieurs composants sur le même point de montage :

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

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

Vous pouvez également lier directement à l'objet composant :

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

keep-alive

Si vous conservez le composant commuté en mémoire, vous pouvez conserver son état Ou éviter de restituer . À cette fin, vous pouvez ajouter un paramètre de commande keep-alive :

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes. sur le site PHP chinois !

Lecture recommandée :

Propriétés calculées et surveillance des données de Vue.js

Liaison d'événement de Vue.js - Formulaire liaison d'événement

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!