devlog_zz

Dynamic components : ==

slot : HTML 을 사용하려면 slot 태그를 사용해야함 자식 컴포넌트 템플릿안에 나타내고싶은 위치에 넣음 form field form header 등을 slot 을 이용해서 양식을 만들 수 있다. 폼에 대한 템플릿 slot : 폼을 전달할 때 사용 이게 부모 컴포넌트로 가면 여기에 주입이 됩니다. 3 개의 편집 가능한 영역이 존재 - slot 3개 루트 컴포넌트에서 정보를 전달 - 슬롯으로

life cycle hooks beforeCreate : 컴포넌트 또는 뷰 인스턴스가 시작되기 전에 beforeMount : dom에 장착되기 전에 처리해야 할 것 mounted : 돔 조작에 적합

event bus : 루트 컴포넌트를 거치지 않고 자식컴포넌트끼리 이벤트를 주고 받아 데이터를 변경할 수 있다. main.js export const bus = new Vue(); //새로운 객체 생성 - footer와 header에서 사용 Header.vue, footer.vue import { bus } from '../main'; Header.vue this.title='Vue Wizards'; bus.$emit('titleChanged','Vue Wizards'); Footer.vue created(){ bus.$on('titleChanged',(data)=>{ this.title=data; }) }

event (child to Parent) : primitive type의 경우 자식에서 변경하여도 부모에서는 변경이 안되므로 이벤트를 통해 전체가 변경되도록 한다. child에서 수정 시 event를 통해 parent에게 전달하고 parent는 이벤트를 수신하면 listen한다. 변경하는 이벤트를 수신하였을 때 parent의 데이터가 변경되고 -> 새롭게 변경된 데이터를 props를 통해 다른 컴포넌트에 전달된다. 데이터가 변경되면 루트 컴포넌트에서 자식컴포넌트들을 다시 렌더링함 업데이트 된 데이터를 props를 통해 전달 this.$emit('changeTitle','Vue Wizards'); emit을 하여 자식컴포넌트에서 루트로 이벤트를 보내면 루트컴포넌트에서 listen함 - 이벤트와 함께 보내..

primitive type : strings, boolean, numbers - props될 때 참조하는게 아니라 전달받는 컴포넌트에서 새로 생성함 - 수정될 때 원본데이터에는 영향을 끼치지 않고 전달받은 컴포넌트에서만 수정됨 ( 원본데이터랑 props된 데이터가 달라지게 됨 ) reference type : object, array - 원래 데이터에 대한 참조 - 수정해야 할 경우 원본 데이터를 간접적으로 수정가능 같은 component를 2개 생성하고(원래 데이터가 둘 다에게 전달됨 ) 각 버튼을 통해 삭제를 하였을 때 둘 다 동시에 적용됨 ( 원래 데이터를 삭제하는 것이고 두 component모두 원래 데이터를 참조하는 것이므로 )

props : 부모컴포넌트에서 자식컴포넌트에게 전달 자식 컴포넌트 - Ninjas.vue export default { props:['ninjas'] // 이렇게 받음 } } 부모 컴포넌트 - App.vue 단순 string을 전달할 때는 ninjas="ninjas"하면 되는데 object 니까 v-bind이용해야 함 method에서 접근하기 methods:{ test:function(){ this.ninjas } } 유효성 검증 props:{ ninjas:{ type:Array, // type이 array인지 확인, 아닐 시에는 오류 발생 required:true //??전달 되는ㄱ지? } } type : 전달되는 데이터의 타입 확인! - 넘어오는 데이터는 ~타입만 가능하다 required : 반드시 ..

컴포넌트 템플릿안에는 하나의 root element만 존재해야한다 -> 태그로 전체 묶기