Nuxt.js Component

https://nuxtjs.org/tutorials/improve-your-developer-experience-with-nuxt-components

Improve Your Developer Experience With Nuxt Components

 

Component?

컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록을 의미.

Vue에 강력한 기능이다. Component를 적절히 사용하면 화면을 구조화하여 일괄적인 패턴으로 개발 할 수 있으며, 코드를 쉽게 이해하고 재사용이 용이해진다.

 

컴포넌트 분류 방법

 

이름 규칙

 

kebab-case와 pascal-case로 정의한다.

 

 

Props

 

페이지에서 컴포넌트로 데이터를 전달할 때, props를 사용한다.

 

정적 전달

<blog-post title="Vue와 떠나는 여행"></blog-post>

 

동적 전달

<!-- 변수의 값을 동적으로 할당 -->
<blog-post :title="post.title"></blog-post>

<!-- 복잡한 표현을 포함한 동적 값 할당 -->
<blog-post :title="post.title + ' by ' + post.author.name"></blog-post>

https://v3.ko.vuejs.org/guide/component-props.html#%E1%84%8C%E1%85%A5%E1%86%BC%E1%84%8C%E1%85%A5%E1%86%A8-%E1%84%83%E1%85%A9%E1%86%BC%E1%84%8C%E1%85%A5%E1%86%A8-prop-%E1%84%8C%E1%85%A5%E1%86%AB%E1%84%83%E1%85%A1%E1%86%AF

 

페이지에서 컴포넌트로 전달하는 데이터 값이 바뀌었을 때, Component에서 watch를 사용하여 데이터 변경을 감지하고 동작을 정의하면 된다.

 

Props 선언에는 Camel case, 템플릿에는 케밥 케이스를 사용한다.

 

<!-- Nuxt 예시 --> 

<Component full-stack='hello world!' />

props: {
	fullStack: {
    	type: String,
        required: true
    }
}

 

 

Emit

 

컴포넌트에서 페이지로 데이터를 전달하고 싶을 때에는 emit을 사용하면 된다.

 

 

component.vue

this.$emit('updated', this.usercode.id, this.usercode.password)

page에 updated라는 명칭으로 페이지에 값을 전달하는 코드이다.

page에서는 다음과 같이 받는다.

 

page.vue

<Component @updated='getFunction' />

...
methods: {
	getFunction(id, password) {
    	console.log(id, password);
        }
    }
}

 

컴포넌트에서 템플릿으로 $emit할 때에 이름은 케밥 케이스를 사용해야한다.

<!-- Component -->

this.$emit('full-stack');

<!-- Template -->

<Component @fullStack="doSomething()" />