Comment utiliser le code réutilisable d'un autre fichier dans l'API de composition de Vue 3 ?
P粉323050780
2023-08-26 13:01:48
<p>J'ai créé du code réutilisable dans dateTime.js : </p>
<pre class="brush:php;toolbar:false;">import { ref, calculated, watch } from 'vue';
importer * en tant que dayjs depuis 'dayjs' ;
exporter la fonction par défaut dateTime() {
const newDateTimeString = ref(null);
fonction showDateTime (données) {
const dateTime = dayjs(data).format('JJ-MM-AAAA')
newDateTimeString.value = dateTime ;
}
retour {
nouvelleDateTimeString,
showDateHeure
}
}</pré>
<p><strong>Le code dans dateTime.js est appelé dans Table.vue : </strong></p>
<p>Question : Comment puis-je le faire fonctionner ? Je souhaite utiliser <code>{{ showDateTime(scope.row[itemIn.field]) }}</code> dans le modèle. Il me semble que cela devrait finalement déclencher la fonction <code>showDateTime</code> dans <code>dateTime.js</code>. </p>
<p>Qu’ai-je fait de mal ? Code d'erreur : <code>Non capturé (promis) TypeError : Object(...) n'est pas une fonction</code>, qui fait référence à <code>const { showDateTime } = useDateTime();</code> ; </p>
<pre class="brush:php;toolbar:false;"><template v-else-if="itemIn.type == 'dateTime'">
{{ showDateTime(scope.row[itemIn.field]) }}
</modèle>
<script>
importer { ref, calculé } depuis 'vue' ;
importer {defineComponent} depuis "vue" ;
importer { useStore } depuis "vuex" ;
importer { useDateTime } depuis '@/composables/dateTime' ;
exporter le composant défini par défaut ({
nom: "",
accessoires : {
traitementDonnées : Objet
},
Composants: {
Drapeau
},
émet : ["unique", "rafraîchir"],
configuration (accessoires, {emit}) {
const { showDateTime } = useDateTime();
const magasin = useStore()
fonction setStatus (id, route) {
objet const = {
je l'ai fait,
itinéraire : itinéraire
}
return store.getters.getStatus(objet);
}
retour {
getScope,
setUniqueId,
getClass,
obtenirLargeur,
naviguerPagination,
setStatus,
setTag,
showDateHeure
} ;
}
});
</script></pre>
<p><br /></p>
Lorsque vous utilisez
export default
导出useDateTime
hook时,你必须在导入时不使用{ }
: