Vue.js 슬롯 내의 템플릿태그를 사용하려면 어떻게 해야 하나요?

Vue.js 슬롯 내의 템플릿태그를 사용하려면 어떻게 해야 하나요?

HTML을 포함한 템플릿이 있습니다.script태그. 나중에 DOM에 배치할 템플릿으로 vue 컴포넌트 내에서 사용하고 싶은 경우 그대로 배치하여 스크립트 태그도 실행합니다.

템플릿을 컴포넌트 태그 안에 보관하여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가 Vue를 제거한다는 것입니다.template및 그script태그를 붙이고 나서,slot태그를 붙입니다.

지금까지 필사적으로 시도했지만 성공하지 못한 것:

• 템플릿을 다른 템플릿 안에 넣습니다.템플릿은 그냥 사라집니다.
• 를 랩하다slot템플릿이 있으면 템플릿이 사라집니다.
• 를 사용하다<script type="text/x-template" >- 엄청난 실패였어.
• 슬롯의 취득처$slots- 템플릿/스크립트 태그가 없는 VNode입니다.

가장 큰 문제는 프런트엔드가 내부 html에 대한 단서를 가지고 있지 않다는 것입니다.template태그는 다음과 같습니다.서버에 렌더링되는 일부 html, 즉 페이지에 그대로 삽입해야 하는 불변의 레거시 코드일 뿐입니다.

물론 템플릿 태그를 컴포넌트 외부에 붙여 다른 방법으로 가져올 수 있지만, 조금 더 깔끔하고 우아하게 유지하기 위해 컴포넌트 내부에 넣어두고 싶습니다.

Vue는 그런 식으로 일하지 않아. <script>태그는 에 속하지 않습니다.<template>이유가 있어 생략됩니다.페이지 로드 시 무언가를 실행하려면 코어 스핀딩 후크를 사용합니다.

서버에서 생성된 JS 코드를 실행하려면eval()

Parent.vue

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

Child.vue

<template>

</template>

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

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>

언급URL : https://stackoverflow.com/questions/54689375/how-can-i-use-template-tag-inside-slot-in-vue-js