записать Vue Js данные компонентов, методы, реквизиты в отдельные файлы Typescript

Question

Я использую Vue JS 2 и машинопись для своего проекта. Я хочу импортировать data.ts, method.ts, props.ts в мой customComponent. vue:

<!-- ////////////////////////////////////////////////////////////////////// -->
<script lang="ts">
import Vue from "vue";

import data                  from './data'
import props                 from './props'
import methods               from './methods'
import { created, mounted }  from './vue-hooks'

export default Vue.extend({
  name: "custom-component"
});
</script>

Как записать эти файлы машинописи, чтобы они были правильно импортированы в Vue custom компонент?

Answer 1

Вы можете просто переместить код из компонента в каждый отдельный файл и экспортировать их по умолчанию.

Пример для data ниже:

// data.ts
const data = function() {
   return {
     //data here
   }
}
export default data 

И затем используйте его в компоненте

export default Vue.extend({
  name: "custom-component",
  data
});

Но я бы сильно не одобрил бы это. Вы должны разделить свой код на основе соображений, а не структуры объектов. Навигация между всеми этими компонентами для самых простых задач будет большой болью.