首页 文章

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

提问于
浏览 次
3

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

例如，假设我有一个网页上有四个单个文件组件：一个可以对表数据进行排序和分页的表组件，一个过滤表组件数据的过滤器组件，一个包含多个按钮的按钮组件/ edit / delete，以及一个包含下拉列表的 Headers 组件，选项在选中时会替换可用的过滤器和表中的数据 .

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

vue.js

1 回答

  • 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> 标记，而无需将其注册到该组件 .

    回复于

相关问题