ABOUT ME

진심은 있으되 진심밖에 없는 태도는 취하지 말고, 불확실한 삶에서 내가 내릴 수 있는 가장 자유로운 선택은 오늘 하루를 행복하게 사는 것:)

  • defineEmits
    [공부] 프로그래밍/Vue.js 2023. 10. 29. 16:23

     

    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>

    '[공부] 프로그래밍 > Vue.js' 카테고리의 다른 글

    router  (0) 2023.11.05
    Vue 인스턴스  (0) 2023.11.05
    컴포넌트 props  (0) 2023.10.28
    컴포넌트 불러오기  (0) 2023.10.28
    for문3  (0) 2023.10.28
Designed by Tistory.