How can I use template tag inside slot in VueJS?

问题: I have a template that includes some HTML along with some script tags. I want to use it inside my vue component as a template that later I will place into the DOM and I wou...

问题:

I have a template that includes some HTML along with some script tags. I want to use it inside my vue component as a template that later I will place into the DOM and I would like it to be placed as is, so my script tags are also executed.

I would like to keep the template inside the component tag and use a slot.

e.g.

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

But the problem is that Vue removes the template and the script tags and then replaces the slot tag.

What I've desperately tried so far and didn't work:

  • Put the template inside another template - the template just disappears.
  • Wrap the slot with a template - the template just disappears.
  • Use a <script type="text/x-template" > - that was an epic failure.
  • Get the slot from $slots - It is a VNode that doesn't have template/script tags.

The biggest problem is that the front-end doesn't have a clue of what the html inside the template tag looks like. It is just some html that is rendered on the server, some immutable legacy code that has to be inserted as-is in the page in order to work.

Of course I can put the template tag outside of the component and fetch it another way, but I would like to have it inside the component to keep it a bit more tidy and elegant.


回答1:

That's not how Vue works. <script> tags do not belong in the <template> and are omitted for a reason. If you want something to be executed on page load, use a coresponding hook

To execute server generated JS code use eval()

Parent.vue

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

Child.vue

<template>

</template>

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

回答2:

While Vue consumes template tags in its own compiling, you can still force it to emit HTML template tags by using <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>

  • 发表于 2019-02-15 17:03
  • 阅读 ( 206 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除