Wie verwende ich wiederverwendbaren Code aus einer anderen Datei in der Kompositions-API von Vue 3?
P粉323050780
2023-08-26 13:01:48
<p>Ich habe wiederverwendbaren Code in dateTime.js erstellt: </p>
<pre class="brush:php;toolbar:false;">import { ref, computed, watch } from 'vue';
* als Dayjs aus 'Dayjs' importieren;
Standardfunktion dateTime() exportieren {
const newDateTimeString = ref(null);
Funktion showDateTime(data) {
const dateTime = dayjs(data).format('TT-MM-JJJJ')
newDateTimeString.value = dateTime;
}
zurückkehren {
newDateTimeString,
showDateTime
}
}</pre>
<p><strong>Der Code in dateTime.js wird in Table.vue aufgerufen: </strong></p>
<p>Frage: Wie sorge ich dafür, dass es funktioniert? Ich möchte <code>{{ showDateTime(scope.row[itemIn.field]) }}</code> verwenden. Es scheint mir, dass dies letztendlich die Funktion <code>showDateTime</code> in <code>dateTime.js</code> auslösen sollte. </p>
<p>Was habe ich falsch gemacht? Fehlercode: <code>Uncaught (in versprochen) TypeError: Object(...) ist keine Funktion</code>, die sich auf <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, berechnet } aus 'vue';
import { defineComponent } from „vue“;
import { useStore } aus „vuex“;
import { useDateTime } from '@/composables/dateTime';
Standard exportieren defineComponent({
Name: "",
Requisiten: {
processingData: Objekt
},
Komponenten: {
Flagge
},
gibt aus: ["unique", "refresh"],
setup(props, {emit}) {
const { showDateTime } = useDateTime();
const store = useStore()
Funktion setStatus(id, route) {
const-Objekt = {
Ich tat,
Route: Route
}
return store.getters.getStatus(object);
}
zurückkehren {
getScope,
setUniqueId,
getClass,
getWidth,
navigierenPaginierung,
setStatus,
setTag,
showDateTime
};
}
});
</script></pre>
<p><br /></p>
当你使用
export default
导出useDateTime
hook时,你必须在导入时不使用{ }
: