Question

我的单页组件文件：

<template>
  <div></div>
</template>

<style lang="scss" scoped>
</style>

<script lang="ts">
export const component = Vue.extend({...});//This is my component.
export let foo = 'bar'; //Other vars I want to export.
</script>

我要导入组件的位置：

import * as myComp from './path_to_file_above';//Import the file above
Vue.extend({
  components:{
    myComp:myComp.component;//Register the component exported.
  },
  mounted(){
    console.log(myComp.foo);//Use other vars exported.
  }
})

错误：

Uncaught TypeError: Cannot set property 'render' of undefined
    at normalizeComponent (componentNormalizer.js?2877:24)
    at eval (PageEditor.vue?e50e:9)
    at Module../src/components/PageEditor.vue (app.js:7568)
    at __webpack_require__ (app.js:724)
    at fn (app.js:101)
    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/Designer.vue?vue&type=script&lang=ts&:36)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/Designer.vue?vue&type=script&lang=ts& (app.js:2736)

单页组件是否支持导出多个零件模块？如果没有，如何导出有关该组件的其他信息？

Answer 1

仅将组件默认导出，并以其他名称导出其他变量，然后使用myComp.default注册该组件：

export default Vue.extend({
  //my component
})
export let foo = 'bar'//other vars

import * as myComp from './path_to_file_above';
Vue.extend({
  components:{myComp:myComp.default},
  mounted(){console.log(myComp.foo)}
})

在TS中的Vue中将多个零件模块导出为单个文件组件

1 个答案: