TIL 230718 [Vue] 부모 컴포넌트에서 자식 컴포넌트 사용하기

Month.vue와 WriteBtn.vue 파일을 생성해서 자식 컴포넌트 2개를 만들었다.

리액트랑 똑같이 import해서 html 태그로 넣어줬는데 브라우저에서 검사로 보면 태그가 들어갔는데 화면에는 아무것도 안보였다. 넣어줬는데....? 😯

왜 달과 작성버튼이 안보이나요....?

month와 writebtn 태그는 추가됐다.

 

vue에서는 자식 컴포넌트를 쓰고 싶으면 components에 해당 컴포넌트 이름을 넣어줘야한다.

// 부모 컴포넌트
export default defineComponent({
  setup() {
    const data = reactive({
      selectedKr: true,
    });

    const changeButtonState = (e: Event) => {
      const target = e.target as HTMLButtonElement;
      target.id === 'kr' ? (data.selectedKr = true) : (data.selectedKr = false);
    };

    return { data, changeButtonState };
  },
  components: {
    Month,
    WriteBtn,
  },
});

 

그랬더니 컴포넌트 등장!!!!

달과 작성버튼이 나왔다.