반응형 Framework/vue_Architecture12 $ref, $refs - DOM접근(vue.js) $ref속성은 지양된다. virtual DOM을 사용할 필요성을 잃기 때문에 예외적인 경우를 제외하곤 $ref 속성은 지양해야 한다. 접근하고 싶은 태그에 ref속성명을 할당해준다. ex) [mounted] $refs는 컴포넌트가 렌더링 된 후 접근할 수 있다. dom이 부착되기 전인 beforeCreated(), created() 에서 $refs를 접근한다면 undefined가 출력되는것을 확인할 수 있다. refs를 활용한 자식 컴포넌트 DOM접근이 가능하다. https://coonihong.tistory.com/38 [Vue.js] refs를 활용한 DOM 접근 방법 이번 포스트에서는 Vue에서 제공하는 refs를 활용하여 DOM에 접근하는 방법에 대해서 다뤄보겠습니다. Refs JavaScript.. 2023. 1. 10. http통신 연습(vue) 라이프 사이클 연습 아님 post, get 단순 버튼 사용 식 연습 api는 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2022, serving ~1.7 billion requests each month. jsonplaceholder.typicode.com //App.vue [get] //PostList.vue Load Posts {{ errMessage }} {{ post.id }} {{ post.ti.. 2023. 1. 9. 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. 이전 1 2 3 다음 728x90 반응형
