多个单文件组件和 Vue Webpack 模板

Posted 2023-02-23

【中文标题】多个单文件组件和 Vue Webpack 模板

【英文标题】：Multiple Single File Components and Vue Webpack Template

【发布时间】：2017-10-10 18:24:36

【问题描述】：

我使用https://github.com/vuejs-templates/webpack 建立了一个简单的 Vue 站点。这个模板带有一个单一的文件组件（App.vue）。我想弄清楚如何构建一个包含多个单文件组件的网站？

例如，假设我有一个网页，上面有四个单个文件组件：一个可以对表格数据进行排序和分页的表格组件，一个过滤表格数据的过滤器组件，一个包含多个像新/编辑/删除的按钮，以及一个标题组件，其中包含选项后，选定在表中交换可用过滤器和表中的数据时。

我假设我会创建四个 .vue 页面（Table.vue、Filter.vue、Button.vue 和 Header.vue），但我不确定如何将它们全部包含在同一页面上。我假设我会使用 App.vue 作为其他四个单文件组件的容器，但我不确定如何将其他四个 .vue 页面包含到 App 单文件组件中。 main.js 中应该有对它们的引用吗？

【参考方案1】：

将它们导入到您使用它们的任何父组件定义中，并将它们注册到父组件的components 属性中：

import MyTable from 'path/to/Table'
import MyFilter from 'path/to/Filter'
import MyButton from 'path/to/Button'
import MyHeader from 'path/to/Header'

export default 
  components:  MyTable, MyFilter, MyButton, MyHeader ,

然后，您可以在父组件的模板中使用它们的标签：

<my-table></my-table>
<my-filter></my-filter>
<my-button></my-button>
<my-header></my-header>

---

或者，您可以在main.js 中全局注册它们：

import Table from 'path/to/Table'

Vue.component('my-table', Table);

这样您就可以在任何组件中使用<my-table> 标签，而无需将其注册到该组件。