Communication between components in Vue.js - dynamic components

This time I will bring you the communication between components of Vue.js - dynamic components, communication between components using Vue.js - dynamic components What are the precautions , here are the actual cases , let’s take a look.

By using the reserved element and dynamically binding its is attribute, you can dynamically switch multiple components on the same mount point:

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

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

You can also directly Bind to the component object:

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

keep-alive

If you keep the switched component in memory, you can retain its state or avoid re-rendering. For this purpose, you can add a keep-alive command parameter:

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Computed properties and data monitoring of Vue.js

Event binding of Vue.js- Form event binding

The above is the detailed content of Communication between components in Vue.js - dynamic components. For more information, please follow other related articles on the PHP Chinese website!