Vuejs 컴포넌트 연결하는 방법

 

How to import components outside root path in vue

원하는 컴포넌트를 최상위 컴포넌트에 연결하는 방법

 

 

Create a component

컴포넌트 만들기란 하나의 vue파일을 만드는 것 ( 예 Fruits.vue )

// Fruits.vue
<template>
  <section>
    <h1>Fruits</h1>
    <ul>
      <li 
      v-for="fruit in fruits"
      :key="fruit">
      {{ fruit }}
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  data() {
    return {
      fruits: [
        'Apple', 'Banana', 'Cherry'
      ]
    }
  }
}
</script>

 

Import Component

components폴더 내에 있는 Fruits.vue파일을 연결한다.

<script>
  import Fruits from '~/components/Fruits'
</script>

 

<Script>

Components옵션을 객체데이터로 선언한다.

<script>
import Fruits from '~/components/Fruits.vue'
export default {
  components: {
    Fruits
  }
}
</script>

 

<Template>

Components의 이름을 빈 태그로 사용한다.

<template>
  <Fruits />
</template>