Vue директива для компиляции пользовательских директив - PullRequest
Новая
       47

Vue директива для компиляции пользовательских директив

0 голосов
/ 25 июня 2019

Я написал директиву обертки, которая использует функцию vue Render . Внутри функции рендеринга все, что она делает, это: 

render: function(createElement) {
    const compiled = Vue.compile(this.$props.template);
    return compiled.render.call(this, createElement);
}

Я использую как: 

<Render v-for="item in itemsToRender" :key="item.id" />

Это работает для нативных HTML-элементов: 

const itemsToRender = ['<p>test</p>', '<h1>HELLO</h1>'];

Однако, если я передам свою собственную пользовательскую директиву, такую ​​как 

<my-directive></my-directive>

Тогда vue будет жаловаться на неизвестные компоненты. Вероятно, это потому, что у меня нет пользовательской директивы, импортированной / необходимой в контексте директивы рендеринга. Есть ли обходной путь для этого? Причина, по которой мне нужна эта директива-обертка для компиляции, заключается в том, что такие библиотеки, как vue.Draggable, полагаются на 'v-for', чтобы переупорядочить элементы списка. Однако я хочу, чтобы различные компоненты можно было перетаскивать, поэтому я передаю только шаблоны для компиляции в v-for.

1 Ответ

1 голос
/ 25 июня 2019

Вы можете использовать тег компонента.Проверьте: https://vuejs.org/v2/guide/components.html#Dynamic-Components

Я сделал пример здесь: https://codepen.io/bergur/pen/jjwzEq

Поток примерно такой:

  1. Я регистрирую компоненты в моем приложении
  2. Перечислите их в свойстве data listItemsToRender
  3. Используйте тег <component>, чтобы отобразить их

Вот код 

new Vue({
  name: 'main',
  el: '#main',  
  components: {
    CompA,
    CompB
  },
  data() {
    return {
      header: 'Multiple components',
      itemsToRender: [CompA, CompB]           
    }
  },  
  template: `
  <div>
     {{ header }}
     <component v-for="item in itemsToRender" :is="item" />
  </div>`
})
...