如何在 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标签。

到目前为止我拼命尝试但没有奏效：

• 将模板放在另一个模板中 - 模板就消失了。
• 用模板包裹slot - 模板就消失了。
• 使用<script type="text/x-template" > - 这是一个史诗般的失败。
• 从$slots 获取槽 - 这是一个没有模板/脚本标签的 VNode。

最大的问题是前端不知道template标签里面的html是什么样子的。它只是在服务器上呈现的一些 html，一些必须按原样插入页面才能工作的不可变遗留代码。

当然，我可以将模板标签放在组件外部并以另一种方式获取它，但我希望将它放在组件内部以使其更加整洁和优雅。

Answer 1

虽然 Vue 在自己的编译中使用模板标签，但您仍然可以使用 <component is="template"> 强制它发出 HTML 模板标签

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()

父.vue

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

Child.vue

<template>

</template>

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