Home  >  Article  >  Web Front-end  >  Communication between components in Vue.js - dynamic components

Communication between components in Vue.js - dynamic components

php中世界最好的语言
php中世界最好的语言Original
2018-03-13 14:20:021316browse

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 8c05085041e56efcb85463966dd1cb7e 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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn