共计 924 个字符，预计需要花费 3 分钟才能阅读完成。

最近在用 Vue 做项目，对于 Vue 的组件总有点模棱两可的理解，今天忽然发现是对父组件和子组件在概念上有理解的问题，刚刚仔细研究了一下，颇有所得，记录一下。

我在 Vue 的官网和书上没有找到父子组件在概念上的解释，但想要理解并且运用好组件，在概念上理解父子组件是很重要的。
一般来说，对于父组件的理解就是 html 中的自定义标签，子组件是 Vue 自定义组件中的模版标签，比如对于如下代码：

<div id="app36">
        <testcomponent></testcomponent>
    </div>
    
    <script>
        Vue.component('testcomponent', {data: function(){return {count: 0}
            },
            template: '<button v-on:click="count++">You clicked me {{count}} times.</button>'
        })

    var app=new Vue({el: '#app35'})
    </script>

一般都会觉得父组件是 <testcomponent></testcomponent>，或加上包含他的<div id="app36">，子组件是template: '<button v-on:click="count++">You clicked me {{count}} times.</button>'。
这种理解虽然勉强正确，但是有很大问题，想要理解父子组件或兄弟组件之间的通信，这样的理解远远不够。

真正的父组件或子组件，应该站在更底层的角度去理解，我目前对父组件的理解是：父组件是已被挂载的 vue 实例，而子组件，是被这个实例调用的自定义组件本身，而不仅仅是自定义标签或自定义组件中的模版标签。
在这个例子中，父组件是var app1=new Vue({el: '#app36'})，而子组件是自定义的组件整体。

我为什么会有这样的理解？说到这个问题，我需要提到后端的思维模式，比如 java，java 里也有父类子类，而对 java 来说，所谓的子类并不仅仅是带着父类方法，还有虚拟机中一整套的父类的定义，这是在内存中编译好的一处空间。我对于 Vue 目前并不熟悉，但它在很多方面类似后端编程语言，所以站在底层去思考还是很有必要的。

VUE-父组件与子组件的区别和联系

站内搜索