데이터 공급자 구성 요소 방법

정식 명칭이 뭔지는 모르겠지만 웹 사이트 축소 이미지 에서는 Data Provider Component 라는 이름이라 부른다.
사용하는 장면이 있기 때문에 메모로 남긴다.

뭐야?

render 함수를 통해 데이터를 슬롯에 전달함으로써 UI가 없고 데이터와 논리를 제공하는 구성 요소를 정의할 수 있다.

예제 1

Data Provider Component 측면
DateTimeProvider.vue

<script>
export default {
  name: "DateTimeProvider",
  data() {
    return {
      timerId: -1,
      dateTime: new Date()
    };
  },
  mounted() {
    //定期的に時刻を更新
    this.timerId = setInterval(() => {
      this.dateTime = new Date();
    }, 500);
  },
  beforeDestroy() {
    //タイマー停止
    clearInterval(this.timerId);
  },
  render() {
    //$scopedSlotsの中には各slotが含まれている、またスロットは関数になっている。
    //ここからdefaultスロットを用いる、その際slotへのパラメータを渡す事ができる。
    const defaultSlot = this.$scopedSlots.default({
      dateTime: this.dateTime
    });
    //defaultSlotは配列なのでこれをそのまま描画する。
    //こうすることで,このエレメントをdivなどでラップする必要がなくなる。
    //ただしできるのは単一のエレメントだけ
    return defaultSlot[0];
  }
};
</script>

사용자 코드
Sample01.vue

<template>
  <DateTimeProvider v-slot="{dateTime}">
    <!-- 直下に含むことができるのは１つだけ -->
    <div>
        <div>Date:{{dateTime}}</div>
        <div>LocaleString:{{dateTime.toLocaleString()}}</div>
        <div>秒:{{dateTime.getSeconds()}}</div>
    </div>
  </DateTimeProvider>
</template>

<script>
import DateTimeProvider from "./DateTimeProvider.vue";
export default {
  components: {
    DateTimeProvider
  }
};
</script>

받은 것을 세 가지 방법으로 표시합니다dateTime.
이걸 실행하면 이미지 같은 행동이 있을 거예요.

시간이 업데이트된 것을 확인할 수 있을 것 같습니다.

득점

현재 날짜를 제공하는 구성 요소가 dateTime 슬롯으로 전달

측면 어셈블리를 사용하여 v-slot 수용dateTime에서 가공, 표시합니다.

사용자 정의 모양새를 정의합니다.사용자 어셈블리에 현재 날짜 상태가 있을 필요가 없습니다.

예제 2

코드를 입력한 후 이름을 찾는 모드입니다.
나도 이번에 이 모드를 썼다.Data Provider Component 측면
ProductNameProvider.vue

<script>
//コード,名称のマップ
const products = new Map();
products.set("001", "みかん");
products.set("002", "りんご");
products.set("003", "ぶどう");

export default {
  name: "ProductNameProvider",
  props: {
    productCode: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      productName: ""
    };
  },
  methods: {
    async fireProduct() {
      await this.$nextTick();
      if (this.productCode === "") {
        this.productName = "";
        return;
      }
      //今回は例なので外部apiからではなくMapから名称を取得している。
      this.productName = products.get(this.productCode) || "(Not Found)";
    }
  },
  render() {
    return this.$scopedSlots.default({
      productName: this.productName
    })[0];
  }
};
</script>

사용자 코드
Sample02.vue

<template>
  <ProductNameProvider ref="productNameProvider" :productCode="productCode" v-slot="{productName}">
    <div>
      <input type="text" v-model="productCode" maxlength="3" @change="onChangedProductCode" />
      <span>:{{productName}}</span>
    </div>
  </ProductNameProvider>
</template>

<script>
import ProductNameProvider from "./ProductNameProvider.vue";
export default {
  components: {
    ProductNameProvider
  },
  data() {
    return {
      productCode: ""
    };
  },
  methods: {
    onChangedProductCode() {
      this.$refs.productNameProvider.fireProduct();
    }
  }
};
</script>

productCode를 변경할 때 ProductNameProvider 의 fireProduct 함수를 실행 중입니다.
이걸 실행하면 이미지 같은 행동이 있을 거예요.

코드를 변경할 때 이름을 얻었는지 확인할 수 있습니다.
이 예에서 @change 에서 ProductNameProvider 측watch을 명확하게 호출하는 방법도 가능하다.

득점

이름을 얻는 방법은 ProductNameProvider.vue 에 숨길 수 있다.

이용자는 productCode만 있으면 되고 productName을data로 정의할 필요가 없다.

실제 표시 이름은 측면 어셈블리를 사용하여 자유롭게 결정할 수 있습니다.

이 예에서는 옆에 표시되지만 아래나 위로는 측면의 자유를 이용한다

총결산

데이터를 제공하는 구성 요소를 정의합니다.

이용자는 v-slot에서 데이터를 수신하여 변수를 줄일 수 있다.

받은 데이터를 어떻게 가공하는가어떻게 나와요?이용자가 결정할 수 있다.

그렇게 활기찬 장면이 있었는지는 모르겠지만 기억하기엔 편리한 팁이다.

참고 자료

Data Provider component in Vue.js