时间戳

首页 > 解决方案 > Vue 3 - Composition API - 如何使用模板中另一个文件的可重用代码？

vue.js - Vue 3 - Composition API - 如何使用模板中另一个文件的可重用代码？

问题描述

我在 dateTime.js 中创建了一个可重用的代码：

import { ref, computed, watch } from 'vue';
import * as dayjs from 'dayjs';

export default function dateTime() {

    const newDateTimeString = ref(null);

    function showDateTime(data) {
        const dateTime = dayjs(data).format('DD-MM-YYYY') 
        newDateTimeString.value = dateTime;
    }

    return {
        newDateTimeString,
        showDateTime
    }
}

来自 dateTime.js 的代码在 Table.vue 中被调用：

问题：我怎样才能让它工作？我想{{ showDateTime(scope.row[itemIn.field]) }}在模板中使用。在我看来，它最终应该触发showDateTime里面的功能dateTime.js

我做错了什么？错误代码：Uncaught (in promise) TypeError: Object(...) is not a function指的是const { showDateTime } = useDateTime();

<template v-else-if="itemIn.type == 'dateTime'">
    {{ showDateTime(scope.row[itemIn.field]) }}
</template>

<script>
import { ref, computed } from 'vue';
import { defineComponent } from "vue";
import { useStore } from "vuex";
import { useDateTime } from '@/composables/dateTime';

export default defineComponent({
  name: "",
  props: {
    processingData: Object
  },
  components: {
    Flag
  },
  emits: ["unique", "refresh"],

  setup(props, {emit}) {
    
    const { showDateTime } = useDateTime();
    const store = useStore()

    function setStatus(id, route) {
        const object = {
            id: id,
            route: route
        }
        return store.getters.getStatus(object);
    }

    return {
      getScope,
      setUniqueId,
      getClass,
      getWidth,
      navigatePagination,
      setStatus,
      setTag,
      showDateTime
    };
  }
});

</script>

标签： vue.jsvue-composition-api

解决方案

作为您export default的useDateTime钩子，您必须在没有以下内容的情况下导入它{ }：

import useDateTime from '@/composables/dateTime';

推荐阅读