Props and Emit
Props 로 데이터 전달하기
모든 component instance 에는 자체 격리 된 범위가 있다
즉, 하위 component의 template에서 상위 데이터를 직접 참조 할 수 없으며, 그렇게 해서는 안 됨!
데이터는
props
option을 사용하여 하위 component로 전달 될 수 있다
Prop
상위 component의 정보를 전달하기위한 사용자 지정 특성
하위 component는
props
option을 사용하여 상위 component로부터 받을 것으로 기대되는props
를 명시적으로 선언해야 함
ex)
Parent.vue - 상위 컴포넌트
Child.vue - 하위 컴포넌트
camelCase
vs kebab-case
camelCase
vs kebab-case
HTML 속성은 대소 문자를 구분하지 않으므로 문자열이 아닌 템플릿을 사용할 때
camelCased
prop 이름에 해당하는kebab-case
를 사용해야 함
리터럴
vs 동적
리터럴
vs 동적
리터럴 prop은 숫자가 아닌 문자열로 전달됨
JavaScript 숫자를 전달하려면 값이 JavaScript 표현식으로 평가되도록
v-bind
or:
를 사용해야 함!
단방향 데이터 흐름
모든 props는 하위 속성과 상위 속성 사이의 단방향 바인딩을 형성함
상위 속성이 업데이트 되면 하위로 흐르게 되지만, 그 반대는 안 됨!
이렇게 하면 하위 컴포넌트가 실수로 부모의 상태를 변경하여 앱의 데이터 흐름을 추론하기 어렵게 만드는 것을 방지할 수 있음
vue.js 는 양방향 가능
v-model 은 양방향
emit 하지 않아도 가능
but, vue는 컴포넌트 간 양방향 가능하지만 단방향을 쓰는것을 권장!
단방향 flow 를 만들어야 한다!
Event Emit
컴포넌트의 통신 방법 중 하위 컴포넌트에서 상위 컴포넌트로 통신하는 방식
이벤트 발생 코드 형식
하위 컴포넌트의
method
나life-cycle hook
과 같은 곳에 아래와 같은 코드를 추가한다해당 이벤트를 수신하기 위해 상위 component의 템플릿에 아래와 같이 구현
+
Youtube-browser 만들기
1. Google Developer Console에서 Youtube API key 받기
2. axios
설치
axios
설치
3. 공식 문서로 사용법 파악하기
+
vue-filter
install
register
Last updated