Vue之-组件-组件嵌套

               1.传统形式：

                 1.2组件形式：

                 1.3组件的定义：

         2.组件分为非单文件组件和单文件组件

                非单文件：一个文件包含多个组件

                单文件：一个文件只包含一个组件（a.vue）

        非单文件代码：（局部组件）

<div id="root">
<!--    当如组件标签-->
    <data1></data1>
    <hr>
    <data2></data2>
</div>

<script>

//    1.创建a组件 extend扩展
    const a=Vue.extend({
    //    组件定义时不要写el来绑定，应该由vue来绑定
        template:'<div>' +
            '<h2>name:{{name}}</h2>' +
            '<h2>adress:{{adress}}</h2>' +
            '</div>',
        data(){
            return{
                name:'yykw',
                adress:'陕西',
            }
        }
    })
//    1.创建b组件 extend扩展
    const b=Vue.extend({
        template:'<div>' +
            '<h2>age:{{age}}</h2>' +
            '<h2>sex:{{sex}}</h2>' +
            '</div>',
    //    组件定义时不要写el来绑定，应该由vue来绑定
        data(){
            return{
                age:20,
                sex:"男",
            }
        }
})

    new Vue({
        el:'#root',

        //2.注册组件(局部注册)
        components:{
            data1:a,
            data2:b,
        }
    })
</script>

        全局组件创建：

 小总结：

        组件的三大步骤：

                1.创建组件：const a=Vue.extend ({}）

                2.注册组件：components在vue中注册组件

                3.引用组件：直接调用组件名称作为标签即可

        全局配置组件： Vue.component()    注意不加s

 注意点：

        

 二：组件嵌套:        在组建中在添加组件,并且在父组件中的模板中添加子组件

 深度理解vue组件：

        组件本质是一个VueComponent（组件实例对象）的构造函数，且不是程序员定义的，由Vue.entend生成。

        每次调用Vue.entend时就会返回一个全新的VueComponent。