Props & $emit

Props

부모 > 자식으로 전달해주는 프로퍼티

v-bind 사용

<UserDetail :nameOfChild="name"></UserDetail> // v-bind 생략

nameOfChild="name"

변수명 선언 = 넣어줄 값 => name 은 data() 에서 선언을 해주어야 한다.

> 부모 컴포넌트가 가지고 있는 name 값을 nameOfChild 에 넣어줄게

• 자식 컴포넌트에서는 값을 받아야하는데 > 그것이 props로 사용된다.
• props 는 array 형태로 사용됨

//부모.vue
props:['nameOfChild'],

자식에서 이 형태로 받음

 

> string object 등 어떤값도 전달 가능

//부모.vue
<UserDetail :nameOfChild="{name : 'jieun', familyName:'park'} "></UserDetail>


<p>{{ nameOfChild.name }}</p>
<p>{{ nameOfChild.familyName }}</p>

• 순간적으로 어떤 값을 받아와야하는지 모를때 > props 가 어떤 형태인지 기록해주는 방법이 있다

//자식.vue
props: {
    nameOfChild: Object // 이런식으로 : 뒤에 데이터 타입 지정  
  },

이 props는 부모 값이 변경되면 자식값도 자동으로 변경됨

name = 1이였다가 name = 2 로 변하면 nameOfChild 도 2로 변하게되는원리!

• 그걸 이용해서 watch속성에 값이 변경되면 동작을 실행하게 만들 수 있음

nameOfChild(value) {
//함수 동작 
}

nameOfChild(newV, oldV){
//newV는 바뀌기 후 값 , oldV는 바뀌기 전 값
//함수동작
}

1. 부모 > 자식 변경 가능하면 , 자식끼리 값을 변경해도 부모에서 변경하면 바로 값이 바뀐다.
2. 자식에서 값을 변경 > 부모도 변경하게 만드려면 어떻게 해야 할까?
3. 자식에서 값을 바꾸고 싶으면 부모한테 신호를 보냄 > $emit
   • 부모에서 값을 바꾸고 props 해서 자식에게 바뀐값 전달
4. 자식에서 값이 바뀌면 부모 = 자식 값이 같아짐
5. 자식 내에서 함수를 사용할 수 있음

$emit!

자식이 부모에게 신호를 보내는 법

this.$emit('신호 이름_부모에서 받을 값', 보낼 값);

예시>

//자식 
this.$emit('child',this.user); //child(this.user,1,2,3,...) 의 의미

//부모
<childComponents @child = 'parents'></childComponents>  
//child 라는 신호가 오면 parents라는 함수를 실행 v-on으로 받는다.

//부모 methods
methods : {
    parent(value){
     ...// value= {name,address...}
     this.name = value.name;
     ...
    }
}