vue (2) 썸네일형 리스트형 [vue3] input radio 컴포넌트로 만들기 [vue3] input radio 컴포넌트로 만들기 vue3 composition api의 setup 문법일 때 사용할 수 있는 방법이다. 부모컴포넌트와 자식컴포넌트를 생성해줍니다. ParentComponent.vue 파일 부모 컴포넌트 쪽은 이렇게 작성해줍니다. 여기서 중요한것은 v-model과 value 값을 모두 작성해주는건데요. value 값에는 해당 radio 를 선택했을 때 v-model에 있는 변수에 들어갈 값을 입력해줍니다. ChildComponent.vue 파일 자식 컴포넌트에는 이렇게 작성해줍시다. props로는 modelValue 값을 넘겨주고요, id 값은 랜덤하게 일단 설정해둡니다. 자식 컴포넌트의 input 태그 속성값들을 보면 v-bind="$attrs" 가 있는데요. 이렇게 .. [vue3] input checkbox 컴포넌트로 만들기 [vue3] input checkbox 컴포넌트로 만들기 vue3 composition api의 setup 문법일 때 사용할 수 있는 방법이다. 간단하게 이렇게 부모컴포넌트와 자식컴포넌트를 만들어두고 해봅시다. ParentComponent.vue 파일 부모 컴포넌트 쪽은 이렇게 해두는데, 먼저 자식컴포넌트를 불러와서 v-model로 값을 넘겨줍니다. ChildComponent.vue 파일 이어서 자식컴포넌트 쪽에는 이렇게 입력해주시면 되는데요 부모에서 v-model 로 받은 값이 props의 modelValue로 넘어오게 됩니다. 이후에 input checkbox에서 @input 이벤트가 일어날 때 emit으로 update:modelValue 를 해주고, 값으로 $evnet.target.checked 값.. 이전 1 다음
