컴포지션 API에서 Provide/Inject 사용하기

Composition API에서 Provide/Inject를 사용하는 방법을 알아보자.

// CompositionAPIProvide.vue
<template>
  <div>
    <CompositionAPIInject />
  </div>
</template>

<script>
import { provide } from "vue";
import CompositionAPIInject from "./CompositionAPIInject.vue";

export default {
  components: { CompositionAPIInject },
  setup() {
    provide("title", "Vue.js 프로젝트");
  },
};
</script>

// CompositionAPIInject.vue
<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>
<script>
import { inject } from "vue";
export default {
  setup() {
    const title = inject("title");

    return { title };
  },
};
</script>

// index.js
const routes = [
  ...,
  {
    path: "/compositionApiProvide",
    name: "CompositionAPIProvide",
    component: () =>
      import(
        /* webpackChunkName: "about" */ "../views/CompositionAPIProvide.vue"
      ),
  },
];