[Vue] 8. Vue素子の再利用&共通関数の開発-3)ComponentAPIでのProvide/Injectの使用

6207 ワード
vue テキストリンク

ComponentAPIでのProvide/Injectの使用


ComponentAPIで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"
      ),
  },
];
[Java]静的変数とメソッド
[フレックス検索]クラスタ構成