defineEmits

 

defineEmits

 

defineProps : for문에서 10개의 <li> 태그를 표시하고, 각 <li> 태그에는 <O번째 태그>와 텍스트를 표시
defineEmits : 각<li> 태그에 클릭 이벤트를 정의하고,
클릭하면 alert에서 "O번째 li태그가 클릭되었습니다."를 표시

 

Comp.vue

---

// HTML
<template>
  
  <li @click="handleClick">
    {{ `${index}番目のタグ: ${txt}` }}
  </li>

</template>

// Javascript
<script setup>

  const { txt, index } = defineProps({
    txt: String,
    index: Number
  });

  const emit = defineEmits(['handleClick']);
  const handleClick = () => {
    alert(`${index}番目のliタグがクリックされました。`);
  };

</script>

// CSS
<style>
</style>

 

App.vue

---

// HTML
<template>
	
  <ul>
    <Comp
      v-for="i in 10" 
      :key="i"
      :txt="'test'"
      :index="i" 
    />
  </ul>

</template>

// Javascript
<script setup>
	
  import Comp from './Comp.vue';

</script>

// CSS
<style>
</style>