반응형 Framework43 options API vs Composition API (vue.js) options API vs Composition API 2023. 1. 8. Components_provide, inject, Dynamic component(2) Provide-Inject 부모컴포넌트에 provide provide: { username: 'scalper' } 해당 값을 전달받을 먼 자식 컴포넌트에게 inject (배열로) export default { name: 'comp-3', inject: ["username"], } 생산성 없는 동적라우팅의 모습 ▼ menu1 menu2 menu3 Dynamic component component라는 태그를 사용해서 다이나믹 컴포넌트를 만들 수 있다. is라는 prop을 넘기게 되고 is에 컴포넌트 이름이 넘겨지게 된다. keep-alive 화면이 전환될 때마다 렌더링되지만, 각 컴포넌트의 내용을 유지시켜준다. 2023. 1. 6. Custom Event (vue.js) props로 보낸 값은 값 읽기전용 속성이다. 그렇기 때문에 해당 값은 재정의 할 수 없다. 이럴 경우는 자식 컴포넌트에서 값을 변경하고 싶다면, 이벤트를 통해서 부모에게 전달할 수 있다. $emit 자식 컴포넌트에서 값을 변화하려면 이벤트를 부모에게 전달 //DetailView.vue Modal Page close 위 로직은 자식 모달창 컴포넌트이다. 여기서 작동되야 하는 부분은 모달창을 닫는 close 버튼이다. displayShow가 부모쪽에서 boolean값을 통해 true일 경우 open되었다. 그렇다면, props로 displayShow를 받아 자식 컴포넌트에서 false로 만들어 주면 되지 않을까? 생각하지만 당연히 될 수 없다. 위에 써 놓은것과 같이 props는 읽기 속성이고 값의 변경이.. 2023. 1. 6. Components(1) 나눠져 있는 섹션들을 다른 파일로 구분해서 따로 관리를 한다. 한 화면을 만들기 위해서 각각의 화면을 분리하여 필요할 때 사용한다. 자주 사용되는 내용의 컴포넌트는 별도의 파일로 분리하고 해당 부분만 불러와서 사용할 수 있는것이 컴포넌트이다. [컴포넌트 규칙] components 이름 작성 방법 - import 시에도 컴포넌트 명 작성시 지켜야할 규칙 1. 의미가 있는 단어의 네이밍 2. 2가지의 단어가 조합된 네이밍 3. 대문자로 시작하고, 카멜케이스로 작성한다. [vue파일에서 style scope] - 해당 파일에서만 적용 가능한 style로 scope를 줌 컴포넌트로 props 넘기는 방법 정적 데이터 전송 : username이 넘겨주고자 하는 값은 name인 string 데이터이다. 데이터를 전.. 2023. 1. 6. 이전 1 2 3 4 5 6 ··· 11 다음 728x90 반응형
