본문 바로가기
반응형

분류 전체보기137

options API vs Composition API (vue.js) options API vs Composition API 2023. 1. 8.
Delete `␍` eslint (prettier/prettier) 해결방법 [.eslintrc.cjs] 파일에 추가 rules: { 'prettier/prettier': [ 'error', { endOfLine: 'auto', }, ], }, /* eslint-env node */ require("@rushstack/eslint-patch/modern-module-resolution"); module.exports = { root: true, extends: [ "plugin:vue/vue3-essential", "eslint:recommended", "@vue/eslint-config-prettier", ], parserOptions: { ecmaVersion: "latest", }, rules: { "prettier/prettier": [ "error", { endOfLin.. 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.
728x90
반응형