Vue -将Vue文件包含到其他Vue文件中

Question

我是Vue的新人。

我创建了一些元素(我使用的是元素组件)，代码太长了。我想知道有没有什么方法可以创建几个Vue文件并将它们全部包含到一个文件中？例如，我有Navbar.vue、Header.vue、Footer.vue和Body.vue。

我想把它们都包含在一个文件中。

有可能吗？

Answer 1

好的。您可以像在我的示例中那样导入和使用它们。如您所见，不要忘记在components中注册它们。

这可能是您的app.vue文件

<template>
  <div id="app" class="container">
    <the-header />
    <!-- this could be <TheHeader /> depending on your setup -->

    <the-navigation /> 
    <!-- this could be <TheNavigation /> depending on your setup --> 
  </div>
</template>

<script>
import TheHeader from '@/components/the-header.vue'
import TheNavigation from '@/components/the-navigation.vue'

export default {
  name: 'app',
  components: {
    TheHeader,
    TheNavigation
  }
</script>

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