VUE子组件的实例应该写在子组件还是父组件？

Question

如题，有这样的场景
父组件代码示意

<div>
    <mycomponent></mycomponent>
</div>

子组件中有这样的结构

<template>
    <div  id="app">
    </div>
</template>

问题：
针对子组件的实例代码

new Vue({
    el: '#app'
}) 

如果放在顶层父组件的JS代码部分，会提示找不到元素

如果放在子组件中，写到window.onload = funciton(){}里面也会有错误提示

父子组件是通过vue-router实现的。

所以实例代码应该放在父组件还是子组件？为什么？

希望大神给出回复，感激不尽！！！！

Answer 1

孩纸，看来你还没有玩转vue，起码没搞清楚new vue到底是怎么回事，作为启动应用的关键，new vue这件事一般只做一次，不是对每个组件都来一遍的。看下图会有一个直观感受

然后建议你玩玩vue-router-skeleton，生成一个简单的，立即可见/用的小应用，以此为基础，修修改改看效果，多多理解！

vue init leftstick/vue-router-skeleton <project name>

补充：

其实你缺少的是对组件的理解/认识。文档中自然以一个new vue作为示例，简单粗暴。因为vue-table的文档旨在讲解这个组件本身，作者已经假设你懂vue的设计/开发了(事实是你并不懂，所以这里就尴尬了)。

文档里的

new Vue({
    el: '#app',
    columns: [
        'firstname',
        'lastname',
        'nickname',
        'birthdate',
        'group.name_en',
        'gender',
        'last_login',
        '__actions'
    ]
})

其实关键部分就是columns数组，因为在<vuetable api-url="/api/users" :fields="columns></vuetable>里面用到了。其他部分都是构建一个可用的完整demo的骨架部分。对你的使用无意义。

如果不会引用组件，建议先用我给你的生成器生成一个项目，看看home.vue里是怎么引用其他组件的(虽然不是三方组件，但引用方式无区别)