如何在vuejs中的两个单个文件组件之间切换

Question

我想在vuejs中的两个单个文件组件之间切换，我不怎么使用附加和分离功能

Answer 1

您可以使用component，它是vue提供的内置组件。

HTML

<div id="app">
  <h3>Parent component</h3>
  <button @click="current= 'ComponentA'">Show component A</button>
  <button @click="current= 'ComponentB'">Show component B</button>
  <component :is="current"></component>
</div>

脚本

const ComponentA ={
  template:"<h4>This is component A</h4>"
}

const ComponentB ={
  template:"<h4>This is component B</h4>"
}

new Vue({
  el:'#app',
  data:{
    current: "ComponentA"
  },
  components:{
    ComponentA,
    ComponentB
  },

})

这里是fiddle