Как я могу использовать тег шаблона внутри слота в Vue.js?

Question

У меня есть шаблон, который включает в себя некоторые HTML-теги script.Я хочу использовать его внутри моего компонента vue в качестве шаблона, который позже я буду помещать в DOM, и я хотел бы, чтобы он был размещен как есть, поэтому мои теги сценария также выполняются.

Я хотел бы сохранитьшаблон внутри тега компонента и используйте slot.

например

<amazing-component>
    <template>
        <p>This is the content</p>
        <script>
           console.log("I want to be executed as long as someone puts me in the DOM!");
        </script>
    </template>
</amazing-component>

<script type="text/x-template" id="component-template">
   <slot></slot>
</script>

Но проблема в том, что Vue удаляет теги template и script, а затем заменяетslot tag.

То, что я до сих пор отчаянно пробовал и не работало:

• Поместите шаблон в другой шаблон - шаблон просто исчезает.
• Оберните slot шаблоном - шаблон просто исчезнет.
• Используйте <script type="text/x-template" > - это был эпический провал.
• Получите слот из $slots - ЭтоVNode, у которого нет тегов template / script.

Самая большая проблема заключается в том, что интерфейс не имеет понятия о том, как выглядит HTML внутри тега template.Это просто какой-то html-файл, отображаемый на сервере, какой-то неизменный унаследованный код, который должен быть вставлен как есть на странице, чтобы работать.

Конечно, я могу поместить тег шаблона вне компонентаи получить его другим способом, но я бы хотел, чтобы он был внутри компонента, чтобы он был более аккуратным и элегантным.

Answer 1

Хотя Vue использует теги шаблонов при собственной компиляции, вы все равно можете заставить его генерировать теги шаблонов HTML, используя <component is="template">

var app = new Vue({
  el: '#app',
  template: `
      <div>
          <h1>No template:</h1>
          <template>
              test
          </template>
          <p>More code (check the page source)</p>
          <h1>Yes template: </h1>
          <component is="template">
              test
          </component>
          <p>More code(check the page source)</p>
          <h1>Yes script: </h1>
          <component is="script">
              console.log('Scrpt test');
          </component>
          <p>More code(check the console)</p>
      </div>
  `,
  data: {}
})

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app"></div>

Answer 2

Это не так, как работает Vue.Теги <script> не входят в <template> и по какой-то причине опускаются.Если вы хотите, чтобы что-то выполнялось при загрузке страницы, используйте ответное ядро ​​ hook

Для выполнения сгенерированного сервером JS-кода используйте eval()

Parent.vue

<template>
  <child script="console.log('something')"></child>
</template>

Child.vue

<template>

</template>

<script>
  props: ['script'],
  created() {
    eval(this.script)
  }
</script>