Vue3 html 렌더링 하는방법 [ v-html ]

Vue 개발 중에 한 줄 띄어쓰기 <br> 같은 html 속성을 사용하려고 할 때 

ex) modal

 

// parent.vue
modalMsg.value = `안녕! <br>안녕하세요?`;

<AlarmModalVue :msg="modalMsg">

//children.vue

<div class="modal-body">{{ props.msg }}</div>

modalMsg에서 받은 데이터를 html태그로 인식 하지않고 그대로 나오게 된다.

 

해결 방법

// parent.vue
modalMsg.value = `안녕! <br>안녕하세요?`;

<AlarmModalVue :msg="modalMsg">

//children.vue

<div class="modal-body" v-html="props.msg"></div>

v-html에 전달 받은 데이터를 넣어준다.

 

결과

<br>를 html 태그로 인식하고 한 줄 띄어쓰기를 한다.