Vue组件定义

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

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

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

        //定义一个名为 navbar 的新组件
        Vue.component('navbar',{
            //放dom
            template:`<div>
                <button @click="handleLeft"> left </button>
                电影
                <button @click="handleRight"> right </button>
                </div>`,
            methods:{
                handleLeft(){
                    console.log("left")
                },
                handleRight(){
                    console.log("right")
                }
            },
            computed:{},
            watch:{},
            //data必须是函数写法
            data(){
                return{
                    myname:"11111"
                }
            }
        })

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

<div id="box">
        <navbar></navbar>
</div>

我们的根组件：

//根组件
new Vue({
   el:"#box",
   data:{

   },
   methods:{

   },
   computed:{

   },
})

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

---

组件的复用

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

<div id="box">
        <navbar></navbar>
        <navbar></navbar>
        <navbar></navbar>
</div>

结果：

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

---

组件的组织

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

<div id="box">
        <navbar></navbar>
</div>

定义的子组件可以是全局组件，可以在全局去用；也可以是局部组件，只能在该组件的父组件下去用。

全局子组件的定义：

局部子组件的定义：

---

几点注意事项：

（1）组件名字：

• 组件的名字可以随意起，但是要遵循下面几个规则：
• 组件名不能跟标签名相同，不然代码执行时就会把组件当做标签来使了
• 可以驼峰起法，但是在dom中使用时，要换成“-”的形式，比如 ：

Vue.component('yiyiNavbar',{
        })

<div id="box">
    <yiyi-navbar></yiyi-navbar>
</div>

• 在定义的时候可以用驼峰法：“yiyiNavbar”，但是在dom中用的时候，要用“yiyi-navbar”。

（2）template里的dom片段，没有代码提示，没有高亮显示

          解决办法：vue单文件组件可以解决

（3）template值包含一个根节点，其他的标签都要放在这个节点里面

（4）组件是孤岛，里面用的状态或者方法，外部是无法直接访问的，组件之间也是无法访问的

          解决办法：间接的组件通信来交流

（5）自定义的组件，data必须是一个函数，根组件可以不用；