-
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