Vue 3의 구성 API에서 다른 파일의 재사용 가능한 코드를 사용하는 방법은 무엇입니까?
<p>dateTime.js에서 재사용 가능한 코드를 만들었습니다: </p>
<pre class="brush:php;toolbar:false;">'vue'에서 { 참조, 계산, 시계 } 가져오기;
* 'dayjs'에서 dayjs로 가져오기;
기본 함수 dateTime() 내보내기 {
const newDateTimeString = ref(null);
함수 showDateTime(데이터) {
const dateTime = dayjs(data).format('DD-MM-YYYY')
newDateTimeString.value = 날짜시간;
}
반품 {
새로운날짜시간문자열,
표시날짜시간
}
}</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(약속 있음) 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]) }}
</템플릿>
<스크립트>
'vue'에서 { 참조, 계산된 } 가져오기;
"vue"에서 {defineComponent }를 가져옵니다.
"vuex"에서 { useStore }를 가져옵니다.
'@/composables/dateTime'에서 { useDateTime }을 가져옵니다.
기본 정의 내보내기({
이름: "",
소품: {
처리 데이터: 객체
},
구성요소: {
깃발
},
방출: ["unique", "refresh"],
setup(props, {emit}) {
const { showDateTime } = useDateTime();
const 저장소 = useStore()
함수 setStatus(id, 경로) {
const 객체 = {
아이디: 아이디,
노선: 노선
}
return store.getters.getStatus(객체);
}
반품 {
getScope,
고유 ID 설정,
getClass,
getWidth,
탐색페이지 매김,
세트상태,
세트태그,
표시날짜시간
};
}
});
<p><br /></p>
