父组件和子组件如何区分？

来源：4-2 父子组件间的数据传递

小飞猪来了

2019-07-08

父组件向子组件传值：

这里 counter 组件绑定的数据 count ，点击操作不就是组件本身的 div 吗？为啥这 counter 标签成了父组件？这里希望老师点拨一下，如何区分父组件和子组件？
万分感谢！祝老师工作顺利、身体健康。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件间的数据传递</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="root">
        <counter :count="1"></counter>
        <counter :count="2"></counter>
    </div>
    <script>
        var counter = {
            props:['count'],
            data:function () {
                return {
                    number:this.count
                }
            },
            template:'<div @click="handleClick">{{number}}</div>',
            methods:{
                handleClick:function () {
                    this.number++
                }
            }
        };
        var vm = new Vue({
            el:'#root',
            components:{
                counter:counter
            }
        })
    </script>
</body>
</html>