반응형 Vue8 vue router 이동 // 리터럴 문자열 경로router.push('/users/eduardo')// 경로가 있는 개체router.push({ path: '/users/eduardo' })// 이름을 가지는 라우트router.push({ name: 'user', params: { username: 'eduardo' } })// 쿼리와 함께 사용, 결과적으로 /register?plan=private가 됩니다.router.push({ path: '/register', query: { plan: 'private' } })// 해시와 함께 사용, 결과적으로 /about#team가 됩니다.router.push({ path: '/about', hash: '#team' }) 2024. 8. 3. mixin(vue) 같은 기능을 각각의 컴포넌트에 재 각각 써준다면 수정시 불편함을 초래한다. 한군데 모아두어 그것을 참조하는 컴포넌트가 전체 수정이 될 수 있게 도와준다. 공통 컴포넌트를 mixin을 만들어서 사용할 수 있다. //componentA.vue {{getDateAndTime(createdAt)}} 날짜를 표시하는 date함수를 여러 컴포넌트에서 사용하기 //mixins/dataFormat.js export const dateFormate = { methods:{ getDateAndTime(date){ if(date !== null){ let hour = date.getHours() let minutes = date.getMinutes() let fullDate = `${date.getFullYear()}/${.. 2023. 1. 17. 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 다음 728x90 반응형
