如何在Vue 3的組合API中使用來自另一個檔案的可重複使用程式碼？
P粉323050780
2023-08-26 13:01:48
<p>我在dateTime.js中建立了可重複使用的程式碼：</p>
<pre class="brush:php;toolbar:false;">import { ref, computed, watch } 從 '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
}
}</pre>
<p><strong>在Table.vue中呼叫了dateTime.js中的程式碼：</strong></p>
<p>問題：我該如何使其工作？我想在模板中使用<code>{{ showDateTime(scope.row[itemIn.field]) }}</code>。在我看來，這應該最終觸發<code>dateTime.js</code>中的<code>showDateTime</code>函數。 </p>
<p>我做錯了什麼？錯誤代碼：<code>Uncaught (in promise) TypeError: Object(...) is not a function</code>，它指的是<code>const { showDateTime } = useDateTime();<code>const { showDateTime } = useDateTime();</code> ;</p>
<pre class="brush:php;toolbar:false;"><template v-else-if="itemIn.type == 'dateTime'">
{{ showDateTime(scope.row[itemIn.field]) }}
</template>
<script>
import { ref, computed } 從 '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></pre>
<p><br /></p>
當你使用
export default匯出useDateTimehook時，你必須在匯入時不使用{ }：