vue组件

发布时间:2021-06-22 22:13:14 浏览量:105 标签: vue 组件

什么是组件

    

组件是扩展html的(就是给html做封装),为让让html可以重复使用


        组件分为:

            1.全局组件

                定义:声明在vue对象外的组件,就是全局组件,全局组件可以在任意的对象中使用

                    组件

                    new Vue({

                        el:"app"

                    })

                    new Vue({

                        el:"pdd"

                    })

                    全局组件在任意的对象操作范围内都可以使用,并可以重复使用

                注意事项:

                    组件在声明的时候,必须在new Vue 对象之前

                    声明组件

                    new Vue({})

                语法格式:

                    Vue.component('组件名',{

                        1.template:'html代码'  html代码就是我们准备封装的html代码

                        2.template:"#id名"

                            需要在body标签后定义一个

                                <template id="demo">

                                    布局

                                </template>

                    })

                    new Vue({

                        el:"#app"

                    })

                如何使用组件:

                    在vew的操作范围内,使用 <组件名></组件名>

                    关于组件使用的时候,组件名的使用方法,如果在声明组件的时候,使用的是小驼峰命名法 xxxYyy

                    在使用组件的时候,需要使用中横线(-)连接  例如 <xxx-yyy></xxx-yyy>

                    组件是可以重复使用

            

            2. 局部组件

            定义:定义在new vue对象内,只能在该对象内使用的组件就是局部组件

            语法格式:

                new Vue({

                    el:"#app",

                    data:{},

                    methods:{},

                    components:{

                        '组件名':{

                            template:"html代码 或 #id名"

                        },

                        '组件名':{

                            template:"id名"

                        }

                    }

                })

            定义模板:

                <template id="">

                    唯一的子元素

                    <div>

                        要封装的html代码

                    </div>

                </template>

            使用组件

                <组件名></组件名>

   注意: 在组件中不能直接使用到vue对象中的data数据,如果在组件中需要使用数据,那么需要自己声明数据,在组件中需要在组件对象中使用声明方法的方式声明数据,组件中的数据是方法中的返回值

        语法格式:

            components:{

                        'demo':{

                            template:"#demo",

                            data:function(){  声明的组件数据

                                return{

                                    键:值,

                                    键:值

                                }

                            }

                        }

                    }



搜索
关于我
吴英赫
最新标签
推广