組件

????????組件就是為了拆分Vue實例的代碼量的骤视，能夠讓我們以不同的組件來劃分不同的功能模塊，將來我們需要什么樣的功能白群，就可以去調(diào)用對應(yīng)的組件即可尚胞。

組件化和模塊化的不同

模塊化：是從代碼邏輯的角度進行劃分的，方便代碼分層開發(fā)帜慢，保證每個功能模塊的職能單一笼裳；

組件化：是從UI界面的角度進行劃分的，前端的組件化方便UI組件的重用粱玲。

全局組件

直接在script標簽中定義躬柬，和new Vue平級，不需要再進行注冊抽减，可以直接在html標簽中使用

        //全局組件
        Vue.component('todo-list',{
            template:"<li>全局組件</li>"   
  這個地方也可以寫成”#tem”   然后在vue實例#app的外面書寫html代碼<template id=’tem’></template>
        })

<todo-list></todo-list>

局部組件

直接在script標簽中定義允青，和new Vue平級，只是定義了一個變量卵沉，需要進行注冊

        //局部組件颠锉，定義完之后要在Vue中的components注冊一下
        var TodoItem = {    
            props:['content'],
            template:'<li v-on:click="clickAler">{{content}}</li>'
            methods:{
                clickAler:function(e){
                    // alert(this.content);
                    this.$emit('delete',this.index);
//子組件向外發(fā)布一個delete事件，并攜帶數(shù)據(jù)this.index
                }
            }

        }

        new Vue({
            el:'#root',                           //掛載點：el參數(shù)對應(yīng)的dom標簽
            // template:'<h1>hello {{msg}}</h1>',    //模板：掛載點內(nèi)部的內(nèi)容
   // 如果一個vue實例沒有template史汗，那么它就會找掛載點琼掠，并把掛載點下面的DOM當(dāng)做一個模板
            components:{
              'todo-item': TodoItem
            },
            data: {                               //vue實例里面的數(shù)據(jù)
                msg:'hello ffff',
                num:123,
                list:['第一個','第二個','第三個'],
                inputValue:'',
                inputList:[]
            },
            methods:{
                commit:function(){
                    this.inputList.push(this.inputValue);
                    this.inputValue = '';
                }
            }
        })

<todo-item v-for='(item,index) in inputList' 
v-bind:key='index' v-bind:content='item'  
v-bind:index='index'
v-on:delete='deleteItem'
 ></todo-item>

????????組件名稱使用了駝峰命名，則在引用組件的時候需要把大寫的駝峰改為小寫的字母停撞，同時兩個單詞之間使用‘-’連接瓷蛙；如果不適用駝峰，則直接拿名稱來使用戈毒。
????????組件中的data必須是一個function并return數(shù)據(jù)對象艰猬，這樣才能保證這個組件在不同的地方使用的時候數(shù)據(jù)不會實現(xiàn)共享，每個組件之間的數(shù)據(jù)是獨立的埋市。

render渲染組件

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  render:function(createElements){
    return createElements(login)
  }
})

在這個vue實例中只能渲染login這個組件冠桃，其他標簽不會顯示。
也可以寫成render:h=>h(login)恐疲，將h作為createElements的別名腊满，返回h(login)即為createElements(login)

組件切換

方式一：

if-else

方式二：

使用component標簽

        <a href="" @click.prevent="comName='login'"></a>
        <a href="" @click.prevent="comName='register'"></a>
        <component :is="comName"></component>

組件傳值

????????在組件的使用時，可以給組件傳值培己，首先給組件綁定一個變量content碳蛋，里面存放的值對應(yīng)的是inputList的item，然后在組件的定義中添加props:[‘content’]省咨，這樣在組件的模板中就可以使用content傳過來值了肃弟。

????????其實每一個vue組件就相當(dāng)于一個vue實例，那么#root對應(yīng)的vue實例也就是一個父組件，也就相當(dāng)于在父組件中使用了子組件笤受。如果一個vue實例沒有template穷缤，那么就會去找它的掛載點，掛載點下面的所有DOM標簽就是對應(yīng)的模板箩兽，這樣就解釋了后面我們編程的時候津肛，每個子組件我們都給一個文件存放，并且不寫template標簽汗贫。一個實例就對以一個組件身坐。

父組件向子組件傳值

????????父組件可以在引用子組件的時候通過屬性綁定（****v-bind:****）的形式把需要傳遞給子組件的數(shù)據(jù)傳遞過去。

v-bind:content='item'

????????把inputList數(shù)組中的item作為一個屬性content傳遞給todo-item這個子組件落包，在子組件的props屬性中添加這個屬性”content”部蛇，這樣就可以在子組件中使用這個數(shù)據(jù)了。

方式一：使用props向子組件傳值

(content是屬性咐蝇，item是父組件要傳的數(shù)據(jù)涯鲁，在子組件的props中用content接收這個數(shù)據(jù))

父組件：

image.png

image.png

image.png

image.png

子組件向父組件傳值

通過發(fā)布訂閱的方式

????????子組件首先發(fā)布一個事件delete并攜帶一個數(shù)據(jù)this.$emit(‘delete’,this.index)微渠，在父組件中訂閱了這個delete事件，并用方法deleteItem來接受子組件傳過來的事件返回咧擂，v-on:delete=’deteleItem’逞盆，這樣在deleteItem方法的參數(shù)中便可以得到子組件傳過來的this.index數(shù)據(jù)。

????????本質(zhì)上是父組件定義了一個帶參數(shù)的方法松申，并把這個方法傳遞給了子組件云芦，當(dāng)子組件調(diào)用這個方法的時候把自己的數(shù)據(jù)當(dāng)做實參傳入這個方法，父組件就相當(dāng)于通過這個方法拿到了子組件的數(shù)據(jù)贸桶。

子組件：同樣是childEvent事件舅逸，只不過子組件攜帶了參數(shù)

image.png

image.png