如何在Vue 3的组合API中使用来自另一个文件的可重用代码?
P粉323050780
P粉323050780 2023-08-26 13:01:48
[Vue.js讨论组]

我在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
    }
}

在Table.vue中调用了dateTime.js中的代码:

问题:我该如何使其工作?我想在模板中使用{{ showDateTime(scope.row[itemIn.field]) }}。在我看来,这应该最终触发dateTime.js中的showDateTime函数。

我做错了什么?错误代码: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>


P粉323050780
P粉323050780

全部回复(1)
P粉964682904

当你使用export default导出useDateTime hook时,你必须在导入时不使用{ }

import useDateTime from '@/composables/dateTime';
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号