Vue筆記（三）——組件&插槽

組件

是前端在單頁面上最好的一種實現方式，每一個組件有獨立的做用域，且能夠相互通訊。

單頁面應用 -- SPA

頁面之間的跳轉變成了組件之間的切換，不須要從新加載整個頁面，也不用考慮頁面的生命週期，換成組件的生命週期，在性能上大大的提高了。

Vue 組件的實現

全局組件

<div id="app">
    <!-- 組件的使用 -->
    <global-component></global-component>
</div>

<!-- 組件的定義：Vue.component(組件名稱，{template}) -->
Vue.component('global-component',{
    template:'<h1>全局組件</h1>'
})
let vm = new Vue({
    el:'#app'
});

最終的渲染結果

<div id="#app">
    <h1>全局組件</h1>
</div>

局部組件

<div id="app">
    <!-- 組件的使用 -->
    <private-component></private-component>
</div>

// 局部組件的定義：components:{組件名字：{}}
let vm = new Vue({
    el:'#app',
    components:{
        'private-component':{
             template:'<h1>局部組件</h1>'
        }
    }
});

最終渲染的結果

<div id="app">
    <h1>局部組件</h1>
</div>

組件是一個單獨的做用域

每個組件有單獨的做用域

let vm = new Vue({
    el:'#app',
    data:{count:10},
    methods:{
        increment:function(){
            this.count +=1;
        }
    },
    components:{
        <!-- 這裏寫組件 -->
        'component1':{
            template:'<button v-on:click="increament">{{count}}</button>',
            data:function(){
                return {count:0}
            },
            methods:{
                increment:function(){
                    this.count +=1;
                }
            }
        }
    }
});

渲染結果爲：

<div id="app">
    <p>10</p>
    <!--
        此按鈕每次點擊都會自增，而p標籤永遠都是爲10，
        緣由是組件的做用域是單獨的
    -->
    <button>0</button>
</div>

特殊的HTML結構中使用 is

特殊結構：下拉列表（select）子元素必須爲option，則在使用組件的時候用is

• 做用：主要用於tab切換

<!-- 使用v-for指令時：單個不用加（）; -->
components:{
    template:'<select><option :value="obj.value" v-for="obj in geder">{{obj.text}}</option></select>',
    data:function(){
        return {
            geder:[{text:'男',value:1}{text:'女',value:0}]
        }
    }
}

動態組件 :is

經過控制:is=''的值（即組件的名字）來顯示不一樣的組件

this.color = this.color == 'red' ? 'green' : 'red';

組件封裝

內部返回對象使用閉包函數返回一個對象；

組件屬性

組件的屬性要先聲明後使用：即先使用props['屬性名'...]，再進行調用

<div id="app">
    <!-- 組件的使用 -->
    <componnent1 title="組件屬性" on-bind:text="mess"></componnent1>
</div>

// 全局組件的定義 Vue.component(組件名稱，{template})

// 局部組件的定義
let vm = new Vue({
    el:'#app',
    data:{
        mess:'動態屬性'
    },
    <!-- 局部組件 -->
    componnets:{
        'componnent1':{
            template:'<h1>{{title+text}}</h1>',
            props:['title','text']
        }
    }
});

最終渲染結果

<div id="app">
    <h1>組件屬性</h1>
</div>

組件自定義屬性

• 格式：<組件名 v-on:自定義事件名="">
• 使用：自定義事件名不須要聲明，直接用$emit()觸發

// 定義：
<div id="app">
    <!-- 組件名 -->
    <component v-on:事件名><component>
</div>

// 調用：直接使用組件對象 this.$emit('事件名')

slot分發內容

Vue組件默認是覆蓋渲染的，則使用slot分發內容

Vue.component('component1',{
    tempalte:`
        <div>
            <h1>Tom<h1>
            <!-- 使用slot接收組件中的標籤 -->
            <slot></slot>
        </div>
    `
})

具名 slot

做用：用於將標籤放到特定的位置，則能夠使用slot屬性

<div id="app">
    <!-- 使用組件 -->
    <component1>
        <!-- 顯示標籤:使用slot 屬性 -->
        <h1 slot=tom"">tom</h1>
    </component1>
</div>

Vue.component('component1'{
    template:'<div><slot name ='tom'></slot><button></button></div>'
});

模板寫法

將template的內容單獨拿出來，寫成一個template標籤
只能有一個根節點\

// 定義
<template id="template1">
    <div></div>
</template>

// 使用
let vm = new Vue({
    el:'#app',
    components:{
        component1:{
            template:'#template1'
        }
    }
});