How to switch between two single file component in vuejs

Question

I want to switch between two single file component in vuejs, i don't how to use attach and detach functions

I am very new to vuejs, just want to know how we can switch between two single file component within a single parent. — RAHIL KHAN
– RAHIL KHAN, Commented Jun 21, 2018 at 9:45
Possible duplicate of How to mount dynamically single file component in Vue.js — JP. Aulet
– JP. Aulet, Commented Jun 21, 2018 at 10:02

tony19 · Accepted Answer · 2022-07-15 23:54:31Z

2

You can use the component which is a built in component provided by 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>

script

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
  },

})

Here is the fiddle

edited Jul 15, 2022 at 23:54

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 21, 2018 at 10:01

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to switch between two single file component in vuejs

1 Answer 1

HTML

script

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HTML

script

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related