VUE基礎篇Part7（核心功能組件）——下

這裏的下半部分包括：

1、組件中使用v-model
2、插槽的簡單用法
3、訪問slot
4、動態組件的使用

組件相關的上半部分博客可以點擊查看：

1、組件中使用v-model

需求：通過子組件的加號按鈕來給父組件傳遞數據

直接看例子吧

<btn-comp v-model="total"><btn-comp>

data:{
	total:0
},
components:{
	'btn-comp':{
		template:'<div><button v-on:click="increase">+1000</button></div>',
		data:function(){
			return {
				count: 0
			}
		},
		methods:{
			increase:function(){
				this.count = this.count + 1000
				this.$emit('input',this.count)
			}
		}
	}
}

這裏的v-model能綁定是因爲v-model本身就是一個語法糖，每次使用v-model時都進行了兩步操作：

1、先使用v-bind綁定一個value屬性，這裏就是先綁定了total的屬性
2、再使用v-on給當前元素綁定input事件，這裏就是給btn-comp綁定了一個input事件

有上面兩步操作後，下面的 this.$emit(‘input’,this.count) 會自動生效

2、插槽的簡單用法

用處：讓父組件和子組件組合使用，彌補視圖上的不足

用法：vue中實現了一個內容分發api，使用特殊的slot元素作爲原始內容的插槽，slot寫在子組件的template中

2.1、單個插槽

<!-- 這裏綁定的isShow也是父組件的作用域，如果要子組件綁定的話直接在template裏面寫上，這裏直接寫的話不管寫什麼都是父組件的作用域 -->
<alone-comp v-show="isShow">
	<p>我是父組件插入的內容<p>
</alone-comp>

data:{
	isShow:true
},
components:{
	'alone-comp':{
		template: '<div><slot>如果父組件中沒有插入內容，我就作爲默認內容出現</slot></div>',
		data:function(){
			return {
				isShow: false
			}
		}
	}	
}
//因爲作用域的問題，這裏還是會顯示上面<p>標籤內的文本內容

2.2、具名插槽

用法：給每個要插入的文本內容先設置要一個slot值，這些文本就可以根據slot值插到不同的地方去

<name-component>
	<h4 slot="header">我是小標題</h4>
	<p slot="main">我是文本的內容</p>
	<p slot="footer">我是底部信息</p>
</name-component>

data:{},
components:{
	'name-component': {
		template: '<div>\
						<div class="header">\
                        	<slot name="header"></slot>\
                        </div>\
                        <div class="main">\
                             <slot name="main"></slot>\
                        </div>\
                        <div class="footer">\
                             <slot name="footer"></slot>\
                        </div>\
                   </div>\ '
        }
}

2.3、作用域插槽

用途：從子組件中獲取數據，是一個特殊的slot值，定義的時候要寫上slot-scope=""，裏面隨便寫，可以寫key，也可以寫prop

原理：使用一個可以複用的模板來替換已經渲染的元素，這裏也可以在p標籤上寫，2.5.0版本後可以在任意標籤上寫slot了

<area-component>
	<template slot="area" slot-scope="key">
		{{ key.text }}
    </template>
</area-component>

data:{},
components:{
	'area-component': {
         template: '<div>\
                        <slot text="我是作用域插槽拿到的來自子組件的數據" name="area"></slot>\
                     </div>\ '
    }
}

3、訪問slot

方法：用 this.$slots. 後面接要訪問的插槽名字

<name-component>
    <h4 slot="header">我是小標題</h4>
    <p slot="main">我是文本的內容</p>
	<p slot="footer">我是底部信息</p>
</name-component>

data: {},
components: {
	'name-component': {
		template: '<div>\
                        <div class="header">\
                             <slot name="header"></slot>\
                        </div>\
                        <div class="main">\
                             <slot name="main"></slot>\
                        </div>\
                        <div class="footer">\
                             <slot name="footer"></slot>\
                         </div>\
                   </div>\ ',
        //實例掛載結束後就執行這個mounted方法
        mounted: function () {
			//訪問插槽，就是拿插槽的數據，用
            var header = this.$slots.header
            console.log(header)

            var html = header[0].elm.innerHTML
            console.log(html)

            var text = header[0].elm.innerText
           console.log(text)
    }
  }
}

4、動態組件的使用

作用：vue給我們提供了一個元素component，用來動態的掛載不同的組件

原理：通過is特性來實現的

需求：通過點擊不同的按鈕切換不同的視圖

如果需要切換三種視圖的話，就需要先定義好三個子組件

<button v-on:click="changeView('A')">A組件</button>
<button v-on:click="changeView('B')">B組件</button>
<button v-on:click="changeView('C')">C組件</button>

<!-- 這裏是父作用域，所以綁定的是父組件的data，綁定is屬性的時候記得用v-bind -->
<component v-bind:is="thisView"></component>

data: {
		//默認當前視圖是A
		thisView: 'compA'
},
components: {
		'compA': {
			template: '<div>我是A組件</div>'
		},
		'compB': {
			template: '<div>我是B組件</div>'
		},
		'compC': {
			template: '<div>我是C組件</div>'
		}
},
methods: {
	changeView: function (tag) {
		this.thisView = 'comp' + tag
	}
}