多个单文件组件与Vue Webpack模板
多个单文件组件与Vue Webpack模板
提问于 2017-05-11 16:10:39
我使用https://github.com/vuejs-templates/webpack建立了一个简单的Vue站点。此模板附带一个文件组件(App.vue)。我试图弄清楚如何构建一个包含多个文件组件的站点？
例如，假设我有一个包含四个单一文件组件的网页:一个表组件，可以对表数据进行排序和分页；一个过滤器组件，用于过滤表数据；一个按钮组件，它有许多按钮，比如新/编辑/删除；还有一个标题组件，它有一个下拉选项，在选择这些选项时，可以交换可用的过滤器和表中的数据。
我想我应该创建四个.vue页面(Table.vue、Filter.vue、Button.vue和Header.vue)，但我并不确定如何将它们全部包含在同一个页面上。我假设我将使用App.vue作为其他四个文件组件的容器，但我不知道如何将其他四个.vue页面包含到App.vue文件组件中。应该在main.js中引用它们吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-05-11 16:13:01
将它们导入正在使用它们的父组件定义中，并在父组件的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>标记，而不必将其注册到该组件。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43920680
复制相关文章
相似问题
腾讯云开发者
