Question

我有一个模板，其中包含一些HTML和一些script标签。我想在vue组件中将其用作模板，以后再放入DOM中，希望将其原样放置，因此我的脚本标签也将执行。

我想将模板保留在component标签内，并使用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的工作方式。 val singles: List<Single<String>> = // the list of Single Flowable .fromIterable(singles) .flatMapSingle({ it }, false, /* maxConcurrency */ 1)标签不属于<script>，并且由于某种原因而被省略。如果您希望在页面加载时执行某些操作，请使用核心响应hook

要执行服务器生成的JS代码，请使用<template>

Parent.vue

eval()

Child.vue

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

Answer 2

虽然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>

如何在Vue.js的插槽内使用模板标签？

2 个答案: