Vue组件定义

组件化：把dom、js、css封装在一起，为了将来的重用复用，

为什么组价化：扩展HTML元素，封装可重用的代码；

在script标签里面定义一个名为“navbar”的新组件


        //定义一个名为 navbar 的新组件
        Vue.component('navbar',{
            //放dom
            template:`
                
                电影
                
                
`,

methods:{
handleLeft(){
console.log("left")
},
handleRight(){
console.log("right")
}
},
computed:{},
watch:{},
//data必须是函数写法
data(){
return{
myname:"11111"
}
}
})

组件是可复用的Vue实例，且带有一个名字，在这个例子中是 “navbar” 。我们可以在一个通过new Vue创建的Vue根实例中，把这个组件作为自定义元素来使用：


"box">
        <navbar>navbar>

我们的根组件：


//根组件
new Vue({
   el:"#box",
   data:{
 
   },
   methods:{
 
   },
   computed:{
 
   },
})

因为组件是可复用的Vue实例，所以它们与new Vue接收相同的选项，例如 data、computed、watch、methods以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

组件的复用

我们可以将组件进行任意次数的复用：


"box">
        <navbar>navbar>
        <navbar>navbar>
        <navbar>navbar>

注意：每用一次组件，就会有一个它的新实例被创建，例如data里的“myname”

组件的组织

组件可以创建它的子组件，当然我们只有一个根组件，其他定义的组件都要在根组件下去用，也就是像下面这样，子组件要放在父组件里里面用：

Vue组件定义

组件的复用

组件的组织

几点注意事项：