Vue的组件注册方式

Vue的组件注册

1.全局注册：当Vue创建，组件就会被加载，不管该组件使不使用，都会被加载【占内存】【入门程序】

2.局部注册：当我们使用到某个组件，该组件才会被创建，如果不使用该组件，那么该组件不会被创建

全局注册

    Vue.component("button-a",{
        template:"\n" +
            "    {{count}}",
        data:function () {
            return{
                count:0
            }
        },
        methods:{

        }
    })

局部注册

    let componentA = {
        template:"\n" +
                "    {{count}}",
            data:function () {
                return{
                    count:0
                }
            },
            methods:{

            }
    }
    new Vue({
        el:"#app",
        components:{
            "component-a":componentA,
        }
    })

关于data为什么是一个函数

 组件注册优化

在组件中编写html结构时，来回复制黏贴，非常麻烦，也很占内存。解决办法是在html里用模板编写，并且和js分离

1、模板需要写在template标签中，template标签写在容器外部

2、在template标签中只能有一个根标签

is属性

在html中有一些父子标签，在父标签中只能有特定的子标签【严格规范】【table、ul、ol、dl.....】，如果把子标签封装成组件，在父标签中通过传统方式使用组件，那么会出现显示的效果问题，我们需要通过is进行使用组件

   

       

            

                
序号
                
姓名
                
年龄
            
       
       


       
       

            

                
尾部
            
       
   

组件嵌套

在一个组件中使用另一个组件

组件通讯

1.声明属性

在子组件中通过声明props属性来接收数据

    // //创建子组件
    let BaseColo1 ={
        template:"#color1",
        props:["msg"]
    }

2.传递数据

在父组件中使用子组件时，使用v-bind进行传递数据

3.在子组件中使用接收到的数据

        
{{msg}}