更清洁的方式需要多个Vue组件？

Question

我刚开始与Vue.JS合作,有一个小问题让我烦恼.我的文件结构类似于以下内容:

+ js
|--+ components
|  |-- parent.vue
|  |-- child.vue
|-- main.js

然后在我的main.js中我有以下内容:

window.Vue = require('vue');
require('vue-resource');
Vue.component('parent', require('./Components/parent'));
Vue.component('child', require('./Components/child'));
var app = new Vue({ el: "#app" });

(我实际上并不确定是什么vue-resource,但这是通过全新安装的Laravel 5.3为我设置的)

我立即注意到,如果我添加了太多组件,我的main.js文件将无法管理.使用ReactJS时我没有这个问题,因为main.js只需要包含"父"组件,而父组件包含子组件.我认为Vue.JS会有类似的技巧来帮助我组织我的组件 - 但阅读文档我没找到一个(也许我错过了它？)

有没有办法要么有一个Vue的组件列表,它的依赖(用于Browserify /的WebPack捆绑)或递归目录中运行的每一个文件一个JavaScript语句(所以Browserify /只的WebPack包了整个事情)？

我现在不关心异步组件 - 所以如果解决方案破坏了这个功能,那就没关系.有一天,我想使用Webpack来创建异步组件,只在我需要的时候加载它们,但今天我更感兴趣的是让它运行起来所以我可以玩Vuex.

Answer 1

该Vue.component语法仅是全球的组件,如果你有一个正在这里面另一个组件使用使用的组件:

import Parent from './components/Parent.vue';
import Child from './components/Child.vue';

new Vue({ 
  el: "#app", 
  components: { Parent, Child } 
});

在这些组件内部,您可以使用其他组件.

使用的唯一优点Vue.component(Parent)是,您可以<parent></parent>在所有其他组件中使用此组件全局,而无需隐式声明它们.

祝好运 :)

Answer 2

您不需要在顶层导入所有内容。

在你main.js可以导入父组件

import Parent from './components/Parent.vue'

new Vue({
  el: "#app",
  components: {
    Parent
  }
})

和你的 Parent.vue

<template>
  <div>
    <p>I am the parent</p>
    <child></child>
  </div>
</template>

<script>
  import Child from './Child.vue'

  export default {
    mounted() {
      console.log('mounted parent')
    }
  }
</script>

<style scoped>
  // ...
</style>

然后在你的 Child.vue

<template>
  <p>I am the child</p>
</template>

<script>
  export default {
    mounted() {
      console.log('mounted child')
    }
  }
</script>

<style scoped>
  // ...
</style>

你应该以

<div>
  <p>I am the parent</p>
  <p>I am the child</p>
</div>