19:17 emit 관련 질문

강의에서는 export를 쓰셨지만 현재 script setup을 이용해 코딩중인 학생입니다.

※ 부모 컴포넌트에 선언한 이 함수를

const toggleLike = () => {
  /* Emit 자식 컴포넌트에서 다시 상위인 부모 컴포넌트로 값을 보내줄 때 사용 */
  posts.value.isLike = !posts.value.isLike
}

아래 이벤트 핸들러에 넣어 동작시키고 싶었지만

인식하지 못해 아래와 같은 방법으로 동작시켰습니다.

@toggle-like="post.isLike = !post.isLike"

혹시 @toogle-like에 함수명을 넣어 동작 시키려면 어떻게 수정해야할까요?

부모 컴포넌트

<template>
  <div>
    <main>
      <div class="container py-4">
        <div class="row g-3">
          <div v-for="post in posts" :key="post.id" class="col col-4">
            <AppCard
              :title="post.title"
              :contents="post.contents"
              :type="post.type"
              :is-like="post.isLike"
              @toggle-like="post.isLike = !post.isLike"
            ></AppCard>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import AppCard from '@/components/AppCard.vue'
import { ref } from 'vue'

const posts = ref([
  { id: 1, title: '제목1', contents: '내용1', isLike: true, type: 'news' },
  { id: 2, title: '제목2', contents: '내용2', isLike: true, type: 'news' },
  { id: 3, title: '제목3', contents: '내용3', isLike: true, type: 'news' },
  { id: 4, title: '제목4', contents: '내용4', isLike: false, type: 'notice' },
  { id: 5, title: '제목5', contents: '내용5', isLike: false, type: 'notice' },
])

const toggleLike = () => {
  /* Emit 자식 컴포넌트에서 다시 상위인 부모 컴포넌트로 값을 보내줄 때 사용 */
  posts.value.isLike = !posts.value.isLike
}
</script>

<style lang="scss" scoped></style>

자식 컴포넌트

<template>
  <div>
    <div class="card">
      <div class="card-body">
        <!-- type : news, notice -->
        <span class="badge bg-secondary">{{ typeName }}</span>
        <h5 class="card-title mt-2">{{ title }}</h5>
        <p class="card-text">{{ contents }}</p>
        <a href="#" class="btn" :class="isLikeClass" @click="$emit('toggleLike')">좋아요</a>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, defineEmits } from 'vue'
const props = defineProps({
  type: {
    type: String,
    default: 'news',
    validator: value => {
      return ['news', 'notice'].includes(value)
    },
  },
  title: {
    type: String,
    required: true,
  },
  contents: {
    type: String,
    required: true,
  },
  isLike: {
    type: Boolean,
    default: false,
  },
  obj: {
    type: Object,
    default: () => {},
  },
})
console.log('props.title : ', props.title)

const isLikeClass = computed(() => (props.isLike ? 'btn-danger' : 'btn-outline-danger'))

const typeName = computed(() => (props.type === 'news' ? '뉴스' : '공지사항'))

const emit = defineEmits(['toggleLike'])
</script>

<style></style>

<template>
  <div>
    <main>
      <div class="container py-4">
        <div class="row g-3">
          <div v-for="post in posts" :key="post.id" class="col col-4">
            <AppCard
              :title="post.title"
              :contents="post.contents"
              :type="post.type"
              :is-like="post.isLike"
              @toggle-like="toggleLike(post)"
            ></AppCard>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import AppCard from '@/components/AppCard.vue'
import { ref } from 'vue'

const posts = ref([
  { id: 1, title: '제목1', contents: '내용1', isLike: true, type: 'news' },
  { id: 2, title: '제목2', contents: '내용2', isLike: true, type: 'news' },
  { id: 3, title: '제목3', contents: '내용3', isLike: true, type: 'news' },
  { id: 4, title: '제목4', contents: '내용4', isLike: false, type: 'notice' },
  { id: 5, title: '제목5', contents: '내용5', isLike: false, type: 'notice' },
])

const toggleLike = (post) => {
  /* Emit 자식 컴포넌트에서 다시 상위인 부모 컴포넌트로 값을 보내줄 때 사용 */
  post.isLike = !post.isLike
}
</script>

<style lang="scss" scoped></style>