15. [Nuxt.js] Component

1. 컴포넌트(Component)란?

  Vue.js를 기반으로 했기에 Nuxt.js에서도 당연히 컴포넌트를 사용할 수 있다. 웹페이지에서 반복되는 요소가 존재한다면 우리가 원하는 형태로 컴포넌트롤 만들어 우리가 필요한 웹 페이지의 제작이 가능하다. 반복되는 요소가 존재하는 경우 컴포넌트를 사용하면 된다.

  컴포넌트를 사용하기 위해서는 우선 component 디렉터리에서 해당 요소를 가져와야 한다.

<component 정의>

  웹 페이지에서 사용할 컴포넌트를 정의한다.

- component/NavBar.vue

<template>
    <div class="nav">
        <nuxt-link to="/" class="brand">Real World Events</nuxt-link>
        <nav>
        <nuxt-link to="/">List</nuxt-link>&nbsp;|
        <nuxt-link to="/create">Create</nuxt-link>
        </nav>
    </div>
</template>
    
<style scoped>
    .brand {
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      font-size: 1.5em;
      color: #39b982;
      text-decoration: none;
    }
    .nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
    }
    .nav .nav-item {
      box-sizing: border-box;
      margin: 0 5px;
      color: rgba(0, 0, 0, 0.5);
      text-decoration: none;
    }
    .nav .nav-item.router-link-exact-active {
      color: #39b982;
      border-bottom: solid 2px #39b982;
    }
    .nav a {
      display: inline-block;
    }
</style>

<component 사용>

  정의된 컴포넌트는 태그 형태로 만들어 사용이 가능하다.

- pages/1.vue

<template>
      <div id="app">
          <nav-bar/>
          <nuxt/>
      </div>
</template>
<script>
    import NavBar from "~/components/NavBar.vue";
    export default {
      components: {
        NavBar
      }
    };
</script>
 

- 결과

(출처 : https://medium.com/vue-mastery/free-nuxt-js-tutorial-creating-an-app-1a531bc6045)

2. 컴포넌트 데이터 전송

  컴포넌트를 사용할 떄 웹 페이지에 필요한 데이터 정보를 검녀줄 수 있다. 그리고 이 데이터를 웹 페이지에 업로드하여 우리가 원하는 데이터를 페이지에 출력 시킬 수 있다.

  이때 컴포넌트의 데이터 전송을 위해 사용되는 키워드는 Props이다.

- component/c1.vue

<template>
    <div>
        <h2>Nuxt Component</h2>
        <p>{{ text }}</p>
    </div>
</template>
 
<<script>
export default {
    props: ['text']
}
</script>
 

- pages/1.vue

<template>
 
  <div class="container">
    <c1 :text="message1"></c1>
    <c1 :text="message2"></c1>
  </div>
 
</template>
<script>
    import Logo from '~/components/Logo.vue'
    import c1 from '~/components/c1.vue'
 
    export default {
          components: {c1},
    }
</script>
 

3. props를 통한 데이터 검사

  props를 통해 데이터를 넘기게 될때 데이터에 대한 검사를 할 수 있다. props의 유효성 검사를 위해서 인자는 총 7가지 타입으로 정의 된다.

- props 데이터 인자

• String
• Number
• Boolean
• Function
• Object
• Array
• Symbol

- props 유효성 검사

• type : 테이터의 타입을 검사
• required : 데이터의 필수 유무 (true면 반드시 존재, false변 없어도 됨)
• default : 값을 넘기지 않았을 때 사용하는 기본 값
• validator : 넘어온 값 검사

export default {
    props: {
        p1: [Number, String],
        p2: {
            type: String,
            require: true,
        },
        p3: {
            type: Number,
            default: 100
        },
        p4: {
            type: Object,
            default: function (){
                return { message: 'hello world'}
            }
        }
        p5: {
            validator: function (value) {
                return value > 0
            }
        }
    }
}