[Vue.js] component 불러오기

✅ 컴포넌트 불러오기 기본 흐름

📂 예시 구조

src/
├── components/
│   └── MyButton.vue
└── App.vue

🔹 MyButton.vue (자식 컴포넌트)

<template>
  <button>클릭</button>
</template>

<script>
export default {
  name: 'MyButton'
}
</script>

🔹 App.vue (부모 컴포넌트에서 사용)

<template>
  <div>
    <h1>App 컴포넌트</h1>
    <!-- 컴포넌트 이름을 써서 배치 가능 -->
    <MyButton />
  </div>
</template>

<script>
import MyButton from './components/MyButton.vue';  // ① 컴포넌트 불러오기

export default {
  name: 'App',
  components: {                                     // ② 컴포넌트 등록
	  // 불러온 변수명 그대로 쓰는 것이 관례
    MyButton: Mybutton,
  }
}
</script>