vue组件介绍

组件是什么

        vue中认为 万物皆组件

        组件是由html css js构建起来一个元素  组件一旦被构建就不能在改变

        组件可以被复用

组件的使用

        组件模板在vue2 只能有一个根元素

        注意：

                组件标签名 不能与已有的html标签名冲突

                如果自定义的组件标签名 含有多个单词组成(一般建议使用中横线命名或者使用大驼峰或者小驼峰)

                在html页面中调用时候  需要统一将小驼峰或者大驼峰转化为中横线调用

                原因：HTML不区分大小写

                例如：

                        Vue.component("TestDemo", {

                            template: `

                                <元素标签>

                                    内容

                                </元素标签>

                            `

                        })

                        <test-demo></test-demo>

                组件注册分为两种：想要使用组件 你需要先注册

                    1 全局注册

                        Vue.component("自定义组件标签名", {

                            template: `

                                <元素标签>

                                    内容

                                </元素标签>

                            `

                        })

                   <自定义组件标签名></自定义组件标签名>  // 它所渲染的就是template里边所写的模板

                    2 局部注册

                        components: {

                            自定义组件名: {

                                template: `

                                    <元素标签>

                                        内容

                                    </元素标签>

                                `,

                                components: {

                                    子组件名: {

                                        template: `

                                            <元素标签>

                                                内容

                                            </元素标签>

                                        `

                                    }

                                }

                            }

                        }