컴포넌트에서 다른 컴포넌트 사용하기

컴포넌트를 재활용하는 방법을 알아보자.

컴포넌트 안에 다른 컴포넌트 사용

//PageTitle.vue
<template>
  <h1 class="page-title">{{ title }}</h1>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: "페이지 타이틀",
    },
  },
};
</script>
<style scoped>
.page-title {
  padding-left: 5px;
  border-left: 3px solid violet;
  text-align: left;
}
</style>

// DataBindingExample.vue
<template>
  <div>
    <PageTitle title="부모 컴포넌트에서 전송할 페이지 타이틀" />
  </div>
</template>

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

export default {
  components: { PageTitle },
  data() {
    return {
      sampleData: "",
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {},
};
</script>

<style scoped></style>

컴포넌트를 사용한다는 것에 대한 의미 알기