inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue3 완벽 마스터: 기초부터 실전까지 - "실전편"

공통 컴포넌트 분리 (based on Vue.js 3 spec)

PostForm.vue 분리 문의 드립니다.

361

shlee3

작성한 질문수 1

0

PostForm.vue 파일로 컴포넌트 분리 중

PostCreateView , PostForm 동작에 대해서 이해가 잘 안가서 문의 드립니다.

 

  1. PostCreateView 에서 PostForm 사용시 title, content 를

    v-bind가 아닌 v-model 사용하는것이 어떻게 동작되는지 모르겠습니다.

     

     

    v-model을 사용해도 자식 컴포넌트에서 defineProps 으로 받을 수 있는건가요?

  1. PostForm 에서

    $emit('update:title', $event.target.value) 하면 상위 컴포넌트에서는 어떤 동작이 발생되는지 궁금합니다.
    @update 와같이 받는 부부분이 없는데, update:title, update::content 가 어떤 동작을 의미하는지 모르겠습닏다.

     

 

vue.js

답변 1

0

짐코딩

안녕하세요 🙂

질문1) PostCreateView 에서 PostForm 사용시 title, contentv-bind가 아닌 v-model 사용하는것이 어떻게 동작되는지 모르겠습니다. v-model을 사용해도 자식 컴포넌트에서 defineProps 으로 받을 수 있는건가요?

>> 네, 맞습니다. 자식 컴포넌트에서 modelValue props로 받고, update:modelValue emit으로 업데이트할 수 있습니다.

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

질문2) PostForm 에서 $emit('update:title', $event.target.value) 하면 상위 컴포넌트에서는 어떤 동작이 발생되는지 궁금합니다. @update 와같이 받는 부부분이 없는데, update:title, update::content 가 어떤 동작을 의미하는지 모르겠습닏다.

>> 상위 컴포넌트에서는 @update:title="" 이벤트로 받을 수 있고 다중 v-model을 활용하면 v-model:title="" 로 연결할 수 있습니다.

 

질문을 보면 v-model이 양방향 바인딩이다. 까지는 알고 계신 것 같은데요.

  • v-model 깊은 이해

  • Vue3 다중 v-model

이러한 개념을 학습하지 않으신 것 같습니다. 꼭 학습 후에 실전편 강의를 보는것을 권장드립니다.

 

질문드립니다.

0

32

0

unplugin-vue-components 질문드립니다.

0

37

2

강의듣다가 헷갈려서 질문드립니다.

0

31

1

와 짐코딩님 강의 들으면서 느끼는게 많네요.

0

32

1

질문드립니다.

0

32

2

라우터 인스톨 후 실행안됨

1

48

2

코드 자동 포매팅 질문

0

68

2

필터 watchEffect 질문입니다.

0

50

1

json-server 오류가 다른게 뜨네요

0

113

1

미리보기가 안됩니당...

0

69

2

unplugin-vue-components

0

80

2

TypeError 질문

0

51

1

v-model="show" :show="show" 같이 사용?

1

57

1

hash 모드 배포의 필요성?

0

61

2

.eslintrc.cjs 가 없습니다

0

95

2

title,content값이 비어서 저장되는데 제가 혹시 어떤 부분을 잘못 작성했는지 ㅜㅜ 알고싶습니다.

0

98

3

_title_like: "", 문의드려요 해당 값을 설정하면 list가 아에 안나옵니다.

0

64

1

@click.prevent="params._page = pageNum"> 에 .value를 안쓰는 이유가 궁금합니다.

0

71

2

중첩된 컴포넌트 문제

0

75

2

교안에 있는 부분이 아닌가요?

0

109

2

useAxios Proxy(Object) RefImpl

0

113

1

axios timeout

0

327

3

강의와 상관은 없지만, 궁금한 점이 있어 질문드립니다.

0

122

2

컴포넌트 분리 부분에서 오류가 나요ㅠㅠ

0

167

2