Vue.js 노트(note)

Life cycle hooks

인스턴스나 컴포넌트에서의 라이프사이클 소개와 흐름도, 훅 소개

• https://kr.vuejs.org/v2/guide/instance.html#인스턴스-라이프사이클-훅
• https://vuejs.org/v2/api/#Options-Lifecycle-Hooks

nuxt.js

vue.js베이스로 만들어진 ssr 프레임워크

https://nuxtjs.org

style guide

권장하는 코드 스타일 가이드

https://vuejs.org/v2/style-guide/

props attribute 값들 여러개를 동적으로 넘겨주기

<component/>와 같이 다이나믹 컴포넌트를 사용할때 props값도 다이나믹하게 변화하는데 이것을 대처할 수 있는 방법은 다이나믹하게 attributes값을 만들어야한다.

// template
<element v-bind="post"/>

// data
post = { foo: 'bar' };

와 같이 설정하면 해석을 하게되면 다음과 같은 코드로 하위 컴포넌트로 넘긴다.

<element v-bind:foo="post.foo"/>

https://kr.vuejs.org/v2/guide/components-props.html#Passing-the-Properties-of-an-Object

style scoped를 사용하는 컴포넌트에 스타일 셀렉터 사용하기

원래 scoped 처리된 컴포넌트 내부에 접근이 불가능하다. 그런 이슈가 나왔는지 해결해줄 수 있는 방법을 제공해줬다는것을 이제서야 알게되었다.

.a >>> .b {}

// scss 에서 번들링 오류가 나지 않는다.
.a /deep/ .b {}
.a::v-deep .b {}

출처

• https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
• https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md
• https://jeongwooahn.medium.com/vue-js-scoped-css-1b77c9a1b8bb

provide, inject 사용으로 자식 컴포넌트로 prop 전달하기

참고: https://ko.vuejs.org/guide/components/provide-inject

깊은(deep) 자손 컴포넌트로 prop 형태로 값을 전달할때 사용할 수 있는 함수다.
순간이동할 수 있는 별도의 터널과도 같다.