[Vue] 7. Vueコンポーネント開発プレミアム編-9)Provide/Inject

17008 ワード

vue テキストリンク

Provide/Inject

// ProvideInject.vue
<template>
  <div>
    <ProvideInjectChild :itemLength="items.length" />
  </div>
</template>

<script>
import ProvideInjectChild from "./ProvideInjectChild.vue";

export default {
  components: { ProvideInjectChild },
  data() {
    return {
      items: ["A", "B"],
    };
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {},
};
</script>

<style scoped></style>

// ProvideInjectChild.vue
<template>
  <div>
    <ProvideInjectChildChild :itemLength="itemLength" />
  </div>
</template>

<script>
import ProvideInjectChildChild from "./ProvideInjectChildChild.vue";
export default {
  components: { ProvideInjectChildChild },
  props: {
    itemLength: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {};
  },
};
</script>

<style scoped></style>

// ProvideInjectChildChild.vue
<template>
  <div>Item Length: {{ this.itemLength }}</div>
</template>

<script>
export default {
  props: {
    itemLength: {
      type: Number,
      default: 0,
    },
  },
};
</script>

<style scoped></style>

階層が複雑な場合は、親コンポーネントが階層内に存在している場合でもinjectを直接使用して、親コンポーネント定義のサブコンポーネントを書き込むことができます.各構成部品がデータを転送する必要はありません.

// ProvideInject.vue
<template>
  <div>
    <ProvideInjectChild />
  </div>
</template>

<script>
import ProvideInjectChild from "./ProvideInjectChild.vue";

export default {
  components: { ProvideInjectChild },
  data() {
    return {
      items: ["A", "B", "C"],
    };
  },
  provide() {
    return {
      itemLength: this.items.length,
      items: this.items,
    };
  },
};
</script>

<style scoped></style>

// ProvideInjectChild.vue
<template>
  <div>
    <ProvideInjectChildChild />
  </div>
</template>

<script>
import ProvideInjectChildChild from "./ProvideInjectChildChild.vue";
export default {
  components: { ProvideInjectChildChild },
  data() {
    return {};
  },
};
</script>

<style scoped></style>

// ProvideInjectChildChild.vue
<template>
  <div>Item Length: {{ this.itemLength }}</div>
  <div>Items : {{ items }}</div>
</template>

<script>
export default {
  inject: ["itemLength", "items"],
};
</script>

<style scoped></style>

実装される構成部品が複雑でない場合は、親構成部品から子構成部品へのpropsを使用してデータを転送する方法が望ましい.ただし,構造が複雑になりすぎると毎回伝わりにくくなるため,Provide/Injectを用いることが望ましい.しかし、親コンポーネントから子コンポーネントにデータが順次渡されると、コードにデータがどのように渡されたかが表示され、Provide/Injectを使用してどの親コンポーネントからデータが渡されたかを追跡するのは難しい.したがって,場合に応じて適切なpropsとProvide/Injectを選択する.

Reference

この問題について([Vue] 7. Vueコンポーネント開発プレミアム編-9)Provide/Inject), 我々は、より多くの情報をここで見つけました https://velog.io/@manyyeon/Vue.js-7.-Vue-컴포넌트-개발고급편-9-ProvideInject

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

[Vue] 7. Vue構成部品の開発上級編-6)イベント/データを子構成部品から親構成部品に渡す

LeetCode ClimbingStairs