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 } from 'vue';
import * as dayjs from 'dayjs';
デフォルト関数のエクスポート dateTime() {
const newDateTimeString = ref(null);
関数 showDateTime(data) {
const dateTime = dayjs(data).format('DD-MM-YYYY')
newDateTimeString.value = 日付時刻;
}
戻る {
newDateTimeString、
showDateTime
}
}</pre>
<p><strong>dateTime.js のコードは Table.vue で呼び出されます。</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(...) は、<code>const { showDateTime } = useDateTime();</code> ; を参照する関数</code> ではありません。 </p>
<pre class="brush:php;toolbar:false;"><template v-else-if="itemIn.type == 'dateTime'">
{{ showDateTime(scope.row[itemIn.field]) }}
</テンプレート>
<スクリプト>
import { ref, computed } from 'vue';
「vue」からインポート {defineComponent};
「vuex」からインポート { useStore };
import { useDateTime } から '@/composables/dateTime';
デフォルトのエクスポートdefineComponent({
名前: ""、
小道具: {
処理データ: オブジェクト
}、
コンポーネント: {
フラグ
}、
発行: ["ユニーク", "リフレッシュ"],
setup(props, {emit}) {
const { showDateTime } = useDateTime();
const ストア = useStore()
関数 setStatus(id, ルート) {
const オブジェクト = {
やった、
ルート: ルート
}
戻りstore.getters.getStatus(オブジェクト);
}
戻る {
スコープの取得、
setUniqueId、
getクラス、
幅の取得、
ナビゲートページネーション、
セットステータス、
セットタグ、
showDateTime
};
}
});
</script></pre>
<p><br /></p>
exportdefault
export
useDateTimeフックを使用する場合は、
{ }:
を使用せずにインポートする必要があります。 リーリー