如何将主要组件直接导入 *.vue 文件而不是将其导入到 Vue 中的主要 *.js 文件？

Question

我的 apiCall.vue 文件如下，我想在这里直接添加主要组件，而不是从 index.js 文件加载它。 我想从 js 文件中删除组件并想直接使用到 vue 文件中。 是否可以？

 <template>
<DataTable :value="cars">
    <Column field="vin" header="Vin"></Column>
    <Column field="year" header="Year"></Column>
</DataTable>
</template>

<script>

export default {
  name: 'ApiCall',
  data() {
        return {
            columns: null,
            cars: null
        }
  },
  mounted() {
         this.columns = [
            {field: 'vin', header: 'Vin'},
            {field: 'year', header: 'Year'},
            {field: 'brand', header: 'Brand'},
            {field: 'color', header: 'Color'}
        ];
        this.cars =[
        {vin:'dsad231ff',year:'2012',brand:'Volkswagen',color:'Orange'},
        {vin:'dsad231ff',year:'2012',brand:'Volkswagen',color:'Orange'},
        {vin:'dsad231ff',year:'2012',brand:'Volkswagen',color:'Orange'},
        {vin:'j6w54qgh',year:'2009',brand:'BMW',color:'Blue'}
        ];
     }
}
</script>

<style>
</style>

我的 index.js 文件如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';

Vue.use(VueRouter)
Vue.component('DataTable', DataTable);
Vue.component('Column', Column);

function lazyLoad(view){
  return() => import(`@/views/${view}.vue`)
}
const routes = [
  {
      path: '/apiCall',
      name: 'ApiCall',
      component: lazyLoad('ApiCall')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

我是 Vue 的新手。

Answer 1

您可以在 .vue 文件脚本部分导入组件：

<script>
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
export default {
...
  components: {
    DataTable,
    Column
  }
}
</script>