Динамические x-шаблоны в компонентах Vue - PullRequest
Новая
       41

Динамические x-шаблоны в компонентах Vue

0 голосов
/ 08 ноября 2019

У меня есть этот компонент, и я хотел бы передать параметр / реквизит компонента, сообщив, какой x-шаблон использовать. Когда я делаю это следующим образом, происходит сбой:

JS: 

Vue.component('custom-table', {
    props: ['template'],
    template: '#' + this.template
})
new Vue({ el: '#app' })

HTML: 

<custom-table template="my-template"></custom-table>

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

Ошибка: 

vue.js:3 [Vue warn]: Cannot find element: #undefined

Какя могу использовать такие динамические шаблоны?

Ответы [ 2 ]

2 голосов
/ 08 ноября 2019

Я не уверен, действительно ли это хорошая идея, но она довольно близко подходит к тому, что вы просили: 

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>

Хитрость здесь в том, чтобы использовать версию объекта is, которая позволяет передавать определение компонента в строку. Строго говоря, в игре присутствуют два компонента: родитель и дочерний элемент, а дочерний элемент присваивается шаблону x. Тем не менее, полученный DOM должен быть желаемым, поскольку родитель не добавляет никаких дополнительных элементов.

1 голос
/ 08 ноября 2019

У вас не может быть динамических шаблонов для одного компонента.

Вы можете создавать различные компоненты, а затем динамически выбирать, какой компонент визуализировать для конкретного тега. Для этого Vue поддерживает динамический компонент: 

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

В качестве альтернативы, если вы хотите, чтобы вызывающая сторона заполняла пробелы вашего компонента произвольным HTML, вы можете использовать слоты. 

https://vuejs.org/v2/guide/components-slots.html

Или, если это просто статический HTML, тогда вы можете просто передать сам HTML в виде строки и отобразить содержимое, не экранируя его: 

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

Может быть, одна из этих работ для вас ...

Другими вариантами может быть использование функций рендеринга или JSX.

...