대체 vue에서는 부모 컴포넌트의 함수를 어떻게 실행하는가...!!!!! 수많은 시행착오 끝에 알게 됐다.... 챗지피티가 data() 버전으로만 알려주거나 헛소리를 해서 한참 걸렸다.... 믿을게 못 되는 녀석..... 먼저 부모컴포넌트에서 전달할 함수를 @나 v-on:키워드를 사용해서 전달해 준다. 이유는 모르겠지만 ref를 사용해야 이벤트가 발생했을 때 값이 바뀌는 것 같아서 ref도 추가해 줬다. ref는 다음에 찾아볼 예정이다. // 부모 컴포넌트 ... export default defineComponent({ setup() { const isShowModal = ref(false); const showModal = () => { isShowModal.value = !isShowModal.va..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/R8X6G/btsn7s7rm1Q/Po5M9XfKLDyks8fCPNbmw1/img.png)
Month.vue와 WriteBtn.vue 파일을 생성해서 자식 컴포넌트 2개를 만들었다. 리액트랑 똑같이 import해서 html 태그로 넣어줬는데 브라우저에서 검사로 보면 태그가 들어갔는데 화면에는 아무것도 안보였다. 넣어줬는데....? 😯 vue에서는 자식 컴포넌트를 쓰고 싶으면 components에 해당 컴포넌트 이름을 넣어줘야한다. // 부모 컴포넌트 export default defineComponent({ setup() { const data = reactive({ selectedKr: true, }); const changeButtonState = (e: Event) => { const target = e.target as HTMLButtonElement; target.id === 'kr'..
- Total
- Today
- Yesterday
- 비주얼스튜디오코드
- html
- Python
- 깃
- javascript
- 김버그
- 스파르타코딩클럽
- vscode
- js
- 코드잇
- git
- 코딩앙마
- 회고
- React
- 저스트코드
- 파이썬
- vue
- Til
- TS
- 제로초
- 구름에듀
- Typescript
- 드림코딩
- 타입스크립트
- scss
- 자바스크립트
- CSS
- map
- 제이쿼리
- 리액트
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |