[Vuejs]-Dynamic x-templates in Vue components

by

2👍

I’m not sure whether this is actually a good idea but it does come pretty close to what you’ve requested:

Vue.component('custom-table', {
  props: ['template'],
  template: `<component :is="{ template: '#' + template }" />`
})

new Vue({
  el: '#app'
})
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script type="text/x-template" id="button-template">
   <button>My Template</button>
</script>

<script type="text/x-template" id="em-template">
   <em>My Template</em>
</script>

<div id="app">
  <custom-table template="button-template"></custom-table>
  <custom-table template="em-template"></custom-table>
</div>

The trick here is to use the object version of is, which allows you to pass in a component definition inline. Strictly speaking there are two components in play here, a parent and a child, and the x-template is assigned to the child. That said, the resulting DOM should be as desired as the parent doesn’t add any extra elements of its own.

👤skirtle

1👍

You can’t have dynamic templates for a single component.

You could create various components, and then dynamically pick which component to render for the particular tag. For this, Vue supports dynamic component:

<component v-bind:is="currentTabComponentName"></component>

Alternatively, if you want caller to fill-in-the-blanks of your component with arbitrary HTML, then you can use slots.

Or, if it is just static HTML, then you can just pass the HTML itself as string, and render the content without escaping it:

<div v-html="task.html_content"> </div>

Maybe one of these works for you…

Other options could be to use render functions or JSX.

👤Teddy

Leave a comment