vue中的父子组件以及语法糖写法

**

vue中的父子组件

**

具有上述模样的具有嵌套关系的就是父子组件。我们先用代码定义一个组件名字为comp1

// 定义组件1
        const comp1 = Vue.extend({
            template: 
            <div>
                <p>组件1</p>
            </div>
        })

然后再定义第二个组件名为comp2

// 定义组件2
        const comp2 = Vue.extend({
            template: 
            <div>
                <h2>组件2</h2>
                <comp1></comp1>
            </div>
            components:{ // 局部组件
                comp1: comp1
            }
        })

我们发现, 在组件comp2中注册了comp1组件, 这里comp2是父组件, comp1是子组件.

最后我们可以把comp2注册到Vue对象上, 在页面就可以调用了

// vue也是一个组件, 是一个root根组件
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello"
            },
            components:{
                comp2: comp2
            }
        });

注：如果在引用过comp1之后再下述代码中再次引用comp1之后回报错。

   components:{
                comp2: comp2
            }

vue也是一个组件，是一个root组件，，root组件也叫根组件，相当于组件树开头的，最顶端的那个组件。
组件的语法糖

// 语法糖的写法
Vue.component('comp2', {
    template: '<div><h2>你好, 语法糖写法!</h2></div>'
})

直接注册和引用。但是会将html和组件的代码写在一起会很混乱和麻烦。