programming/Vue.js & Nuxt.js(9)
-
$emit 하위에서 상위로 이벤트 전달하기
emit은 자식 컴포넌트에서 일어난 이벤트에 의해 부모의 데이터에 변화가 생긴 경우 사용한다. 다음 코드는, 모달창을 열고 닫는 코드이다. //상위 컴포넌트 this.$emit('실행할 부모 메소드 이름', 전달할 인자); //모달창 컴포넌트로 하위 컴포넌트이다. //중략 //클릭이벤트 발생시 close메소드 실행
2020.01.12 -
props를 이용해 데이터 통신하기
부모 컴포넌트가 가진 데이터를 자식 컴포넌트에 공유해 줘야할 경우, 자식 컴포넌트 태그에 데이터를 바인딩 해서 전달해주고, 자식 컴포넌트에서는 props를 통해 부모의 데이터를 받는다. //상위 컴포넌트에서 ... export default{ data(){ return{ propsData, selected: { date: null, time: null }, }; } } //자식컴포넌트1 props:{ propsData:데이터타입, } //자식컴포넌트2 props: { 변수명: { type: Object, required: true }//required: true는 꼭 넘겨받아야 하는 데이터인지 설정 },
2020.01.12 -
vue 라이프 사이클( do it Vue.js 입문)
beforeCreated 인스턴스 생성 후 가장 첫 라이프 사이클 단계 data,methods 속성이 아직 인스턴스에 정의되지 않음, DOM에 접근 불가 created data, methods 속성이 정의되어 this.data처럼 접근 가능 , 인스턴스 화면 부착전. 따라서 template 속성에 정의된 DOM요소로접근 불가 서버에 데이터 요청하여 받아오는 로직 수행하기 좋은 단계. beforeMount 템플릿 속성에서 지정한 마크업 속성을 render()로 변환 후 el 속성에 지정한 DOM에 인스턴스 부착 직전에 수행되는 단계 즉,render() 호출 직전 수행할 로직 구현 적합 mounted el에 지정한 DOM에 인스턴스 부착된 후 호출되는 단계 DOM에 접근 가능, 화면 요소 제어하는 로직 적합..
2020.01.08