Vue 컴포넌트 등록 방법

1. 전역 컴포넌트 등록

모든 컴포넌트에서 별도의 import 없이 사용할 수 있음.
Vue 애플리케이션 전역에 등록되므로 컴포넌트를 사용하지 않아도 로드됨.
보통 공용 컴포넌트(예: Modal, Button, Navbar)에 사용.

//main.js
import "./assets/css/index.css";

import { createApp } from "vue";
import App from "./App.vue";
import First from "./components/First.vue";

const app = createApp(App);
//전역 컴포넌트 등록 방법
app.component("First", First);

app.mount("#app");

<script>
import First from "./components/First.vue";

export default {
  data() {
    return {};
  },
};
</script>
<template>
  <h1 className="text-3xl font-bold underline">Hello world!</h1>
  <First />
</template>

2. 지역 컴포넌트 등록

특정 컴포넌트 내부에서만 사용 가능.
Vue 컴포넌트 내의 components 옵션으로 등록.
성능 최적화 가능.
각 컴포넌트에서만 사용 가능하므로 네이밍 충돌 방지.
매번 import 및 components에 등록 필요.

<script>
import First from "./components/First.vue";

export default {
  name:"App",
  components:{
    First
  },
  data() {
    return {};
  },
};
</script>
<template>
  <h1 className="text-3xl font-bold underline">Hello world!</h1>
  <First />
</template>

Scoped

Scoped 스타일의 작동 원리

Vue는 scoped 스타일을 자동으로 컴파일하여 각 컴포넌트의 DOM 요소에 고유한 특성(selector attribute) 을 추가합니다.
다음과 같이 스타일을 정의하면

<template>
  <div class="example">Hello</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

컴파일 후 HTML은 다음과 같이 변환됩니다

<div class="example" data-v-12345> <!-- 고유 데이터 속성 추가 -->
  Hello
</div>

따라서, 이 스타일은 다른 컴포넌트의 example 클래스에 영향을 주지 않습니다.

Scoped와 자식 컴포넌트

부모 컴포넌트의 scoped 스타일은 자식 컴포넌트의 루트 요소에도 영향을 줄 수 있습니다.
영향을 주지 않으려면 자식 컴포넌트를 다른 요소로 감싸야합니다.

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<style scoped>
div {
  color: red;
}
</style>

자식 컴포넌트의 루트 요소가 div인 경우, 부모의 스타일이 자식 컴포넌트에도 적용됩니다.

<!-- ChildComponent.vue -->
<template>
  <div>I'm a child component</div>
</template>

Scoped와 속성

컴포넌트에서 속성을 설정하면, 해당 속성은 컴포넌트의 루트 요소에만 적용됩니다.
props 속성으로 데이터를 전달받을 수 있고, props로 받지 않는 속성만 root요소에 붙습니다.
만약 컴포넌트에 루트 요소가 없으면 속성이 적용되지 않습니다.
v:bind로 string아닌 다른 타입으로 전달 가능합니다.

<template>
  <MyComponent id="unique-id" class="custom-class" />
</template>

<div id="unique-id" class="custom-class" data-v-12345></div>