1.组件

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件同样分为全局组件和局部组件
全局组件:component("组件名",{template:代码块 })
局部组件:components:{"组件名":{template:代码块 } }
注意:1.组件名不可以使用已经存在的html元素。2.组件中的data是一个函数，并有返回值

组件的练习

<div class="add">
        <my-component></my-component>
</div>
<script>
      Vue.component("my-component",{
          template:`
                <div>
                    <p>{{msg}}</p>
                    <button @click="fun">哈哈</button>  //在组件中可以加入vue的一些指令
                </div>
            `,
          data:function(){   //在组件中的data数据是一个函数，并加入返回值
              return{
                  msg:"下课了"
              }
          },
          methods:{        //点击时触发这个函数
              fun:function(){
                  alert("哈哈")
              }
          }
      }     
    )
      new Vue({
          el:".add",
      })
</script>

2.组件之间的传值

分为3类：

1.父给子传用属性传 props:["定义属性"]；
2.子给父传用事件传
3.同级之间的传值

传值练习(父给子传)

<div class="add">
        <my-father></my-father>
</div>
<script>
    Vue.component("my-father",{
        template:`
                <div>
                    <my-tit v-bind:tit="title"></my-tit>  //在这里进行绑定，绑定到了data中的title值
                    <my-name v-bind:names="name"></my-name>
                </div>
            `,
        data:function(){
            return{
                name:["苹果","香蕉","橘子"],
                title:"水果店"
            }
        }
    })
    Vue.component("my-tit",{
        props:["tit"],  //使用props定义了一个新的属性，将这个属性绑定到这个组件上
        template:`
                <h3>{{tit}}</h3> //这个tit的新属性在父及组件中进行绑定,绑定什么数据输出什么
            `
    })
    Vue.component("my-name",{
        props:["names"],
        template:`
            <ul>
                <li v-for="value in names">{{value}}</li> //在组件中可以进行vue的指令操作
            </ul>    

        `
    })
    new Vue({
         el:".add"
     })
</script>