vue 컴포넌트에 html 전달

vue 컴포넌트에 html 전달

현재 vue 컴포넌트에 일부 파라미터를 전달하고 있습니다.

 <Slider
      :images= "['/img/work/slide2.png', '/img/work/slide2.png', '/img/work/slide3.png']"
      :html="['<div>hello</div>', '<div>goodbye</div>']"
    </Slider>

슬라이더는 'html' 슬라이더이거나 이미지가 있는 슬라이더입니다.

이것은 정상적으로 동작합니다만, 전달되는 html은 훨씬 더 복잡해져, 아마 30 행이 되어, 파라메타로 읽거나 관리하는 것은 어려워집니다.

외부 참조서를 전달하여 컴포넌트에 넣을 수 있습니까?

<div v-for="content in html">
    <div class="work-slide">{{ content }}</div>
</div>

보시다시피 구성 요소의 루프는 매우 단순한 v-for입니다.

속성을 사용하여 HTML을 전달하지 않고 슬롯을 사용하여 전달:

my-component라는 컴포넌트와 다음 템플릿이 있다고 가정합니다.

<div>
  <h2>I'm the child title</h2>
  <slot>
    This will only be displayed if there is no content
    to be distributed.
  </slot>
</div>

컴포넌트를 사용하는 부모:

<div>
  <h1>I'm the parent title</h1>
  <my-component>
    <p>This is some original content</p>
    <p>This is some more original content</p>
  </my-component>
</div>

렌더링된 결과는 다음과 같습니다.

<div>
  <h1>I'm the parent title</h1>
  <div>
    <h2>I'm the child title</h2>
    <p>This is some original content</p>
    <p>This is some more original content</p>
  </div>
</div>

HTML을 포함하는 여러 필드를 전달하려는 경우에도 명명된 슬롯을 사용할 수 있습니다.

v-html 지시문을 사용하여 원시 html을 Vue 구성 요소에 주입할 수 있습니다.

몇 달 전 프로젝트에서도 비슷한 문제가 있었습니다.base64 형식의 HTML 코드를 전달하여 수정하였습니다.

부모 컴포넌트:

<wysywyg id="ssaasa" :bal="to64('<strong>Me</strong>')"></wysywyg>

내 방법:

methods: {
        to64(html) {
            return btoa(html)
        }
    }

내 컴포넌트:

<template>
    <div class="RenderHTMLEditor mx-3">
        <label class="subtitle-1 pb-3">{{label}}</label>
        <textarea html="true" v-model="to64"
        width="100%"
        :style="'height:'+height+'px;'"
        wysywyg="true"
        :name="id" :id="id"
        class="tinywy">
        </textarea>
    </div>
</template>

<script>
export default {
    props: ['label', 'id', 'height', 'bal'],
    data: function() {
        return {
            
        }
    },
    computed: {
        to64: function() {
            return atob(this.bal)
        }
    },
    mounted: function() {
        window.initWy(this.id)
    }
}
</script>

<style scoped>
.RenderHTMLEditor {
    width: 100%;
}
</style>

언급URL : https://stackoverflow.com/questions/44923775/passing-html-into-vue-component