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

2019年9月16日 360次阅读 来源: yizheng

最近在用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目前并不熟悉，但它在很多方面类似后端编程语言，所以站在底层去思考还是很有必要的。

    原文作者：yizheng
    原文地址: https://segmentfault.com/a/1190000019911768
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞