2022-07-12(월) TIL

황인호·2022년 7월 11일
0

TIL 모음

목록 보기
100/119

굉장히 오랜만에 적는거같다...

요즘에 이사고 뭐고 좀 정신없다보니 좀 소홀해졌지만
다시 정신차리고 작성해보자!!

Vue.js 공부

🎉props로 자식에게 데이터 보내는 법

  1. 데이터를 전송하고
  2. 데이터를 등록하고
  3. 데이터를 사용한다.

Vue 에서
: (콜론) 은 v-bind이다.
v-bind는 데이터를 가져다가 사용할때 , 보낼때 쓰인다.
사용예시)
<Model :데이터이름="데이터이름" />

  1. 데이터를 골라서 보낸다
    <자식: 작명="데이터">

  2. 자식은 props로 받은거 등록
    props : {데이터이름 : 자료형이름}

  3. 부모 데이터를 자식이 쓰고싶을떄 사용하는것이 props

  4. props 전송하려면 3-step

  5. props 받아온건 read-only

※부모 자식 둘다 사용해야하는 데이터일경우 부모 컴포넌트에
만들어두어야 한다.
데이터를 만들때 데이터 사용하는 곳들 중 최상위
컴포넌트에 만든다.

props 보내려면
:작명="데이터"

props 보낼 때 다양한 자료형 입력가능
:작명="Array,Object"
작명="숫자자료"
작명="문자자료"(v-bind 없이도 가능함)

★★★자식컴포넌트가 부모컴포넌트에 있는 데이터를 수정하고 싶을때
custom event를 쓰면된다.

부모에게 메세지를 보낼 땐
$emit('작명', 데이터)

부모가 메세지 수신할 땐
@작명한거=""
<자식컴포넌트 @작명한거="">

★costom event 사용법(부모에게 메세지보내기)
1. 자식은$emit('작명')
2. 부모는 메세지받으려면 @작명한거=""

밑에서쓸때는 무조건 this. 를 붙어야함

profile
성장중인 백엔드 개발자!!

0개의 댓글