組件：組件化開發(fā)（component） 是 Vue.js 最強(qiáng)大的功能之一。

作用：組件可以擴(kuò)展HTML元素，封裝可重用代碼

（組件在命名是不可以使用HTML中的元素）

組件分為全局組件和局部組件

全局組件

<script>
<div id="itany">
<組件名></組件名>
//組件名不能用HTML元素

</div>
Vue.component('組件名'，{
  template:`<p>這是全局組件</p>`
})
new Vue({
  el:'#itany'
})

局部組件

<div id="itany">
<組件名></組件名>
</div>
    new Vue({
        el:'#itany',
        components:{
            '組件名':{
                template:`<p>12581</p>`
            }
        }
    })

注意

組件名不可以使用已存在的HTML元素
組件中data數(shù)據(jù)是一個(gè)函數(shù)并且要有這返回值

組件之間的傳值

1.父給子傳值（用屬性傳）
2.子給父?jìng)髦担ㄓ檬录鳎?br> 3.同級(jí)之間傳值（用中間量傳）

父給子傳

<div id="app">
            <m-father></m-father>
        </div>
        <script src="js/vue.js"></script>
        <script type="text/javascript">
            Vue.component('m-father',{
                template:`
                  <div>
                      <m-child v-bind:tit='arrs'></m-child>
                      <m-second v-bind:tot='arr'></m-second>
                  </div>
                `,
                data:function(){
                    return{
                        arr:['王鶴棣','官鴻','梁靖康','吳希澤'],
                        arrs:'新f4',
                    }
                }
            })
            Vue.component('m-child',{
                props:['tit'],
                template:` 
                   <h1>{{tit}}</h1>
                `.
            })
            Vue.component('m-second',{
                props:['tot'],
                template:` 
                    <ul>
                        <li v-for="value in tot">{{value}}</li>
                    </ul>            
                            `
            })
            
            new Vue({
                el:'#app',
            })
        </script>

注意：在組件中data選項(xiàng)必須是一個(gè)函數(shù)且有返回值

組件props

選項(xiàng)props是父子組件間的橋梁
props格式為：props：[' 自定義屬性'],

子給父?jìng)?/h5>

<div id="app">
            <my-father></my-father>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.component('my-father',{
                template:`
                <div>                   
                    <h1>這是父組件</h1>
                    <a href="#">{{mes}}</a>
                    <my-child @send='resMsg'></my-child>
                </div>
                `,
                data:function(){
                    return{
                        mes:''
                    }
                },
                methods:{
                    resMsg:function(see){
                        this.mes=see
                    }
                }
            })
            Vue.component('my-child',{
                template:`
                <div>
                    <h1>這是子組件</h1>
                      <input type='text' v-model='arr'>
                      <button v-on:click='sendMsg'>按鈕</button>
                </div>
                `,
                data:function(){
                    return{
                        arr:''  
                    }       
                },
                methods:{
                    sendMsg:function(){
                        this.$emit('send',this.arr)
                    }
                }
            })      
            new Vue({
                el:'#app'
            })
        </script>

this.$emit('自定義事件'，參數(shù))。

子組件中需要以某種方式例如點(diǎn)擊事件的方法來(lái)觸發(fā)一個(gè)自定義事件
將需要傳的值作為$emit的第二個(gè)參數(shù)，該值將作為實(shí)參傳給響應(yīng)自定義事件的方法
在父組件中注冊(cè)子組件并在子組件標(biāo)簽上綁定對(duì)自定義事件

非父子組件之間的通信

<div id="app">
            <child></child>
            <son></son>
        </div>
        <script src="js/vue.js"></script>
        <script>
               var bus=new Vue();  
               
            Vue.component('child',{
                template:`
                <div>
                <h1>這是child組件</h1>
                <button @click='sendMsg'>傳送</button>
                </div>
                `,
                data:function(){
                    return{
                        msg:'這是child組件。傳送給son',
                    }
                },
                methods:{
                    sendMsg:function(){
                        bus.$emit('send',this.msg)
                    }
                }
            })
            Vue.component('son',{
                template:`
                <div>
                <h1>這是son組件</h1>
                    <a href="">{{mess}}</a>
                </div>
                `,
                data:function(){
                    return{
                        mess:''
                        }
                },
                mounted:function(){
                    bus.$on('send',msg=>{
                        this.mess=msg
                    })
                }
            })
            new Vue({
                el:'#app'
            })
        </script>

非父子組件之間傳值，需要定義個(gè)公共的公共實(shí)例but，作為中間倉(cāng)庫(kù)來(lái)傳值