Vue.js实现动态组件

Vue.js实现动态组件

Vue.component('demo', {
  template: '#demo',
  data: function () {
    return {
      currentView: 'default'
    }
  },
  components: {
    default: {
      template: '
默认组件
'
    },
    foo: {
      template: '
Foo组件
'
    },
    bar: {
      template: '
Bar组件
'
    }
  },
  methods: {
    switchView: function (view) {
      this.currentView = view;
    }
  }
});

new Vue({
  el: '#app'
});

HTML

<div id="app">
  <button v-on:click="switchView('default')">默认</button>
  <button v-on:click="switchView('foo')">Foo</button>
  <button v-on:click="switchView('bar')">Bar</button>
  <component v-bind:is="currentView"></component>
</div>

<template id="demo">
  <div>
    <component v-bind:is="currentView"></component>
  </div>
</template>