组件(component): 是vue最强大的功能之一 组件化开发
组件可以扩展 HTML 元素，封装可重用的代码。
全局
局部

组件之间的传值******
父传子 用属性传
子传父 用事件传
同级之间传值

一、父传子（用属性）

<div id="app">
    <hhh></hhh>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>       
<script>
    Vue.component('hhh',{
        template:`
            <div>
                <h1>sss</h1>
                <ul>
                    <li>aaa</li>
                    <li>aaa</li>
                    <li>aaa</li>
                </ul>
            </div>
        `//不能有两个同级别元素 需要加一个父级
    })
    new Vue({
        el:'#app',
        components:{
//          'hhh':{
//              template:``
//          }
        }
    })
</script>

父传子添加按钮

<div id="app">
    <my-father></my-father>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
    Vue.component('my-father',{
        template:`
        <div>
          <input type="text" v-model="txt">
          <button v-on:click="an">添加</button>
          <my-son v-bind:txt="arrs"></my-son>
        </div>
        `,
        data:function(){
            return{
                txt:'',
                arrs:['苹果','Apple']
            }
        },
        methods:{
            an:function(){
                this.arrs.push(this.txt),
                this.txt=''
            }
        }
    }),
    Vue.component('my-son',{
        props:['txt'],
        template:`
        <ul>
            <li v-for="(a,x) in txt"> {{a}} <button v-on:click="shan(x)">删除</button></li>
        </ul>
        `,
        methods:{
            shan:function(ind){
                this.txt.splice(ind,1)
            }
        }
        }),
    new Vue({
        el:'#app'
    })
</script>

二、子传父（用事件传）

<div id="app">
       <my-father></my-father>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script type="text/javascript">
    Vue.component('my-father',{
        template:`
            <div>
                <h1>{{mess}}</h1>
                <my-child @ss='revMsg'></my-child>
            </div>
        `,
        data:function(){
            return{
                mess:''
            }
        },
        methods:{
            revMsg:function(txt){
                this.mess=txt
            }
        }
    })
    Vue.component('my-child',{
        template:`
            <button @click='sendFather'>给父级</button>
        `,
        data:function(){
            return{
                msg:'hhhhhhhh'
            }
        },
        methods:{
            sendFather:function(){
//              this.$emit('自定义事件','参数')
                this.$emit('ss',this.msg)
            }
        }
    })
    new Vue({
        el:'#app'
    })
</script>

子传父表单添加

<div id="app">
        <my-father></my-father>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script type="text/javascript">
    Vue.component('my-father',{
        template:`
            <div>
                <h1>我是父组件</h1>
                <p>子组件传来的数据为:</p>
                <ul>
                    <li>{{mess}}</li>
                </ul>
                <my-child @send='revmsg'></my-child>
            </div>
        `,
        data:function(){
            return{
                mess:''
            }
        },
        methods:{
            revmsg:function(msg){
                this.mess=msg
            }
        }
    })
    Vue.component('my-child',{
        template:`
            <div>
                <h1>我是子组件</h1>
                <input v-model='txt'>
                <button @click='add'>向父组件传递参数</button>
            </div>
        `,
        data:function(){
            return{
                txt:''
            }
        },
        methods:{
            add:function(){
                this.$emit('send',this.txt)
            }
        }
    })
    new Vue({
        el:'#app'
    })
</script>

三、同级之间传值

<div id="app">
<borther></borther>
    <borthers></borthers>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
    var bus=new Vue();
    Vue.component('borther',{
        template:`
        <div>
        <h1>我是哥哥</h1>
        <button @click="btn">点我</button>
        </div>
        `,
        data:function(){
            return{
                txt:'我是妹妹'
            }
        },
        methods:{
            btn:function(){
                bus.$emit('dada',this.txt)
            }
        }
    }),
    Vue.component('borthers',{
        template:`
        <div>
        <h1>我是弟弟</h1>
        <a href="">{{txt}}</a>
        </div>
        `,
        data:function(){
            return{
                txt:''
            }
        },
        mounted:function(){
            bus.$on('dada',msg=>{//这里需要使用箭头函数，用函数this会指向Vue实例，而用箭头函数会指向当前的这个组件
            this.txt=msg
        })

            }
        })

    new Vue({
        el:"#app"
    })
</script>