[vue3] child component를 랜덤하게 동적으로 보여주기(markRow)

단순히 v-for를 돌려서 <div>같은걸 보여주는게 아니라 컴포넌트를 보여줘야했음. 그리고 순서도 랜덤으로ㅇㅇ

 

1. 문제

<my1 v-if="model1.open"></my1>
<my2 v-if="model2.open"></my2>

만약에 html에 미리 이렇게 써놓고 숨겨놨다고 한다면, my2 다음에 my1을 보여주고 싶어도 무조건 저기에 써놓은 순서대로 my1이 위에있고 my2가 밑에 있게됨.

 

2. 컴포넌트를 넣어주는 방법

<template>
  <component :is="line.component" :item="line.item"></component>
</template>

<script setup>
  import { ref, markRaw } from "vue";
  import my1 from "@/component/my1";
    
  const line = ref([]);
    
  line.value.push({
    component: markRaw(my1),
    item: "데이터"
  });
</script>

html에 <component>와 그 안에 :is라는 요소를 넣어줌(:item은 그냥 데이터 전달용 props).

 

그리고 markRaw로 감싼 컴포넌트를 :is의 값으로 전달해주면 된다.

 

3. 컴포넌트를 넣어주는 방법(여러개)

<template>
  <template v-for="line in lines">
    <component :is="line.component" :item="line.item"></component>
  </template>
</template>

<script setup>
  import { ref, markRaw } from "vue";
  import my1 from "@/component/my1";
  import my2 from "@/component/my2";
    
  const lines = ref([]);
    
  lines.value.push({
    component: markRaw(my1),
    item: "데이터1"
  });
  
  lines.value.push({
    component: markRaw(my2),
    item: "데이터2"
  });
</script>

위에꺼랑 다를건 없고 v-for를 추가해주고 여러 컴포넌트를 넣어주면 된다.

 

---

 

참고로 markRow로 넣은 component에서 watch가 안먹힐 경우 아래 포스팅 확인!

[vue3] markRow로 들어간 컴포넌트에서 watch쓰기 (tistory.com)