CODEWITHSUNDEEP
vue.jsvuejs2
side mi
side mi

Reputation: 73

Vue How to replace variables in braces with components

So this is my html code:

<div id="app">
  <my-component ref="my-component"></my-component>
</div>

js:

Vue.component('my-component', {
  template: '<div>This is a component!</div>'
})

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

I want an implementation like that:

<div id="app">
  {{my-component}}
</div>

Then it looks like

<div id="app" > <div>This is a component!</div> </div>

Can this be done?

Upvotes: 0

Views: 1016

Answers (1)

Wang Sheng
Wang Sheng

Reputation: 780

You want dynamic component: https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

HTML

<div id="app">
  <component v-bind:is="compName"></component>
</div>

JS

Vue.component('my-component', {
  template: '<div>This is a component!</div>'
})

new Vue({
  el: '#app',
  data: {
    compName: 'my-component'
  }
});

Upvotes: 1

Related Questions