TechScribe Notes

갑자기 컴포넌트를 못 찾겠다를 외치는 오류 알고보니   export const DefaultBtn = () => {   return (     a href="#" className="default">VIEW COLLECTIONSa>     )  }; 이렇게 작성한 컴포넌트는     import DefaultBtn from './DefaultBtn';  이렇게 import하는게 아니라  import { DefaultBtn } from './DefaultBtn';  이렇게 불러와야함

1. Prop Drilling :가장 상위 컴포넌트 에서 중첩된 하위 컴포넌트에 데이터 전달을 하려면 props를 여러번에 걸쳐서 전달해야함->Provide / inject로 해결 :provide 와 inject를 사용할 때 상위 컴포넌트는 종속 전달자 역할을 하고 하위컴포넌트는 깊이와 상관없이 이 전달자가 제공하는 종속성을 주입할 수 있음. 2.  Provide하위 컴포넌트 항목에 데이터를 제공하려면 상위 컴포넌트의 setup()함수 안에 provide를 작성한다.import { provide, ref } from 'vue';export default { setup() { const message = ref('Hello World!'); provide('message', message); ..

1. slot : 부모 컨포넌트에서 제공하는 콘텐츠를 나타낼 때 사용(HTML, 컴포넌트 등) Click!! Click me !  2. Fallback Content : 상위 컴포넌트에서 슬롯 컨텐츠가 제공되지 않을 때 슬롯에 대한 기본컨텐츠(폴백)을 지정할 수 있음 Default Click!!   3. Named Slots:slot요소에 이름을 부여해서 여러개의 slot 정의가 가능함.- slot에 name 속성을 부여하여 특정 슬롯 컨텐츠가 랜더링 되어야할 위치를 설정해줌- name이 없는 경우 암시적으로 default.- name이 부여된 slot 컨텐츠를 전달하려면 v-slot 을 사용하여 전달할 수 있음. 단축표현 # ..

1. Non-Prop 속성 : Props나 이벤트에 명시적으로 선언되지 않은 속성이나 이벤트. class,style,id~ 2. 속성 상속 : 컴포넌트가 단일 루트 요소로 구성되어 있으면 non-prop 속성은 루트요소의 속성에 자동으로 추가되고 만약에 자식 컴포넌트요소에 이미 있는 class와 style속성이 정의 되어 있으면 부모로 받은 것과 병합된다.  -->click meclick meclick meclick me  3. v-on 이벤트 리스너 상속 : 동일하게 상속 됨에 추가되고, 이미 요소에바인딩 된 요소가 있따면 두 리스너 모두 트리거 된다. -->  4. 속성 상속 비활성화 : inheritAttrs:false 옵션- 자식 컴포넌트 루트요소 이외의 다른 요소에 Non-prop 속성을 적용하..

1.Event :자식 컴포넌트에서 부모 컴포넌트로 데이터 전달 또는 트리거의 목적으로 이벤트를 내보내는 것.이벤트는 emit메서드를 통해 발생시킬 수 있음 2. 이벤트 발생 및 수신 : templete안에서 내장함수 $emit()을 사용하여 직접 커스텀한 이벤트를 내보낼 수 있음 버튼  3.이벤트 파라미터: 이벤트와 함께 특정 값을 내보낼 수 있음. $emit함수 이벤트 명에 추가로 파라미터를 넘길 수 있다. 버튼   4. 이벤트 선언emit옵션으로 선언하며 JS코드에서 이벤트를 내보낼 때는 setup()함수 파라미터로 넘어온 context.emit()메서드를 사용할 수 있음. 1) 문자열 배열 선언//context.emit() 사용export default { emits: ['someEvent'], ..

: 컴포넌트에 각각 데이터를 전달해야할 때 사용할 수 있는 사용자 정의 속성. 1. props선언: 명시적 선언이 필요함  fallthrough 속성더보기: props또는 emitsdp 명시적으로 선언되지 않은 속성이나 이벤트.(class, id, style..)- 단일 컴포넌트를 부모 컴포넌트로 전달할 때, 선언되지 않은 속성이나 이벤트는 자동으로 전달 된다.* 단일 컴포넌트일 때에도 전달하지 않는 방법이 있다 - ingeritAttrs:false)- 단일 컴포넌트가 아닐때는 그 어떤 fallthrough속성도 전달 되지 않지만, 전달하는 방법도 있음 ( $Attrs 내장 객체를 v-bind속성으로 연결) https://ko.vuejs.org/guide/components/attrs 1) 문자열 배열 ..