![UserDetail]( "UserDetail")
本文介绍了在 Vue.js 中，为什么我们要在导入组件后导出它们?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在 PHP 中，当我们包含另一个文件中的代码时，我们会包含它，就是这样，代码现在可以在我们执行包含的文件中使用.但是在Vue.js中，在导入一个组件之后，我们还必须导出它.
为什么?我们为什么不简单地导入它?
解决方案
我想您可能会参考 User.vue 中的以下几行并想知道为什么 UserDetail 和 UserEdit 被导入到文件中并且然后在脚本导出的 components 属性中导出:
从'./UserDetail.vue'导入UserDetail；从 './UserEdit.vue' 导入 UserEdit；导出默认{成分: {appUserDetail:用户详细信息，appUserEdit: 用户编辑}}
vue-loader 期望 .vue 文件的脚本导出包含组件的定义，它有效地包括组装组件模板的配方.如果模板包含其他 Vue 组件，则需要提供其他组件的定义，也称为 组件注册.正如@Sumurai8 所指出的，.vue 文件本身的导入并没有注册相应的单文件组件；而是必须在导入程序的 components 属性中明确注册这些组件.
例如，如果 App.vue 的模板包含 User.vue 被定义为:
<div class="user"><app-user-edit></app-user-edit><app-user-detail></app-user-detail>
</模板><脚本>导出默认{名称:'用户'}
...User 组件将呈现为空白，您将看到以下控制台错误:
[Vue warn]:未知的自定义元素:- 您是否正确注册了组件?对于递归组件，请确保提供名称"选项.[Vue 警告]:未知的自定义元素:<app-user-detail>- 您是否正确注册了组件?对于递归组件，请确保提供名称"选项.
演示 1
当 Vue 尝试在 App.vue 的模板中渲染 <user/> 时，Vue 不知道如何解析内部的 <app-user-detail> 和 User.vue 中注册本地组件来解决(即上面显示的 components 属性).
或者，可以通过全局组件注册 UserDetail 和 UserEdit，这将避免在 User.vue 中进行本地注册.注意全局注册必须在创建 Vue 实例之前完成.示例:
//main.js从'vue'导入Vue；从 '@/components/UserDetail.vue' 导入 UserDetail；从 '@/components/UserEdit.vue' 导入 UserEdit；Vue.component('app-user-detail', UserDetail);Vue.component('app-user-edit', UserEdit);新的 Vue(...);
演示 2
In PHP when we include code from another file, we include it and that's it, the code is now available to us within the file in which we performed the include. But in Vue.js, after importing a component we must also export it.
Why? Why don't we simply import it?
解决方案
I think you might be referring to the following lines in User.vue and wondering why UserDetail and UserEdit are imported into the file and then exported in the script export's components property:
import UserDetail from './UserDetail.vue';
import UserEdit from './UserEdit.vue';
export default {
components: {
appUserDetail: UserDetail,
appUserEdit: UserEdit
}
}
vue-loader expects the script export of a .vue file to contain the component's definition, which effectively includes a recipe to assemble the component's template. If the template contained other Vue components, the definition of the other components would need to be provided, otherwise known as component registration. As @Sumurai8 indicated, the import of the .vue files itself does not register the corresponding single-file-components; rather those components must be explicitly registered in the importer's components property.
For example, if App.vue's template contained <user /> and User.vue were defined as:
<template>
<div class="user">
<app-user-edit></app-user-edit>
<app-user-detail></app-user-detail>
</div>
</template>
<script>
export default {
name: 'user'
}
</script>
...the User component would be rendered blank, and you would see the following console errors:
[Vue warn]: Unknown custom element: <app-user-edit> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
[Vue warn]: Unknown custom element: <app-user-detail> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
demo 1
When Vue attempts to render <user /> inside App.vue's template, Vue doesn't know how to resolve the inner <app-user-detail> and <app-user-edit> because their component registrations are missing. The errors can be resolved by local component registration in User.vue (i.e., the components property shown above).
Alternatively, the errors can be resolved with global component registration of UserDetail and UserEdit, which would obviate the local registration in User.vue. Note that global registration must be done before creating the Vue instance. Example:
// main.js
import Vue from 'vue';
import UserDetail from '@/components/UserDetail.vue';
import UserEdit from '@/components/UserEdit.vue';
Vue.component('app-user-detail', UserDetail);
Vue.component('app-user-edit', UserEdit);
new Vue(...);
demo 2
这篇关于在 Vue.js 中，为什么我们要在导入组件后导出它们?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！