[Vue] Vue 컴포넌트

vue 컴포넌트란? vue 인스턴스를 말한다

컴포넌트의 등록과 사용

• 전역등록(Global Registration)
• 지역등록(Local Registration)

---

전역 컴포넌트 등록

1. components 경로에 vue 파일 생성

 

2. myComponent.vue 내용작성

<template>
<div>
    {{content}}
    <p>사용자 정의 전역 컴포넌트</p>
</div>
</template>


<script>
export default {
    name : 'myComponent',
    data() {
        return{
            content : '짜란~'
        }
    }
}
</script>


<style scoped>
div {
    width: 300px;
    border: solid;
    border-color: rgb(253, 230, 202);
    border-radius: 8px;
    padding: 8px;
    margin :0 auto;
  }

  
</style>

 

3. main.js에 전역 등록

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false


import myComponent from './components/myComponent'
Vue.component(myComponent.name,myComponent)


new Vue({
  render: h => h(App),
}).$mount('#app')

 

4. 최상위 컴포넌트인 App.vue에서 해당 컴포넌트 사용

<template>
  <div id="app">
  
    <myComponent></myComponent>

  </div>
</template>

<script>
export default{ 
  data() {
    return {
    }
  }
}
</script>

 

결과

 

---

지역 컴포넌트 등록

1. components 경로에 vue 파일 생성

 

2. myLocalComponent.vue 내용 작성

<template>
    <div>
    {{content}}
    <p>사용자 정의 Local Component</p>
    </div>
</template>

<script>
    export default {
    name : 'LocalComponent',
    data() {
        return{
            content : '로컬~'
        }
    }
}
</script>

<style scoped>
div {
    width: 300px;
    border: solid;
    border-color: rgb(38, 138, 253);
    border-radius: 8px;
    padding: 8px;
    margin :0 auto;
  }

</style>

 

3. App.vue에서 import하여 사용

<template>
  <div id="app">
    <myComponent></myComponent>
    <LocalComponent></LocalComponent>

  </div>
</template>

<script>
//로컬component import
import LocalComponent from './components/myLocalComponent'

export default{ 
  components : {LocalComponent}
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 

결과

 

---

참고 링크

 

컴포넌트 — Vue.js

 

[Vue.JS] Component 개념을 익히고 만들어보자!!