超簡單的VUE入門3~組件

組件：vue裏面的核心重點，也是一個難點，組件指實現定義好的Vue實例，它封裝可重用的代碼，可重複使用，定義語法如下

Vue.component(tagName,options)

其中tagName是組件名，options是組件相關屬性設置，寫一個簡單例子如下(不要忘記引入Vue的js文件)

HTML：
<div id="d1">
	<com-demo></com-demo>
</div>

JS:
Vue.component("com-demo",{
	template:"<h1>這裏是組件</h1>"
})
new Vue({
	el:"#d1"
})

組件特性：可重用性，單一根元素

接下來開始說有哪些知識點：

1、data數據，當然這裏的數據和vue實例中的數據不同，這裏data類型是函數而非對象。

HTML：
<div id="d1">
	<get-count></get-count>
</div>	

JS：
Vue.component("getCount",{
	data:function(){
		return{
			count:0
		}
	},
	template:`<button @click="count++">點擊加值{{count}}</button>`
})
new Vue({
	el:"#d1"
})

2、props註冊自定義特性，用於外部調用者爲組件傳參

HTML：
<div id="d1">
	<com-demo :str="meg"></com-demo>
	<com-demo :str="name"></com-demo>
</div>	

JS：
Vue.component("com-demo",{
	props:["str"],
	template:"<h1>這裏是組件~{{str}}</h1>"
})
new Vue({
	el:"#d1"，
	data:{
		meg:"hello Vue!!!",
		name:"少年強則國強"
	}
})

3、$emit子組件向父組件傳值，這裏的子組件指的是上面定義的com-demo，部分情況下需要向父組件傳遞參數或者調用父組件方法，這時候就需要使用$emit對父組件進行傳參或調用

HTML：
<div id="d1">
	<com-demo @fun="changeCom"></com-demo>
</div>

JS：
Vue.component("com-demo",{
	data:function(){
		return {
			datas:"子組件數據"
		}
	},
	template:`
	<div>
		<button @click="$emit('fun',datas)">點擊</button>
	</div>
	`
})
new Vue({
	el:"#d1"，
	methods:{
		changeCom(da){
			console.log(da)
		}
	}
})

4、v-model組件上使用，v-model本是和表單中的輸入進行綁定，但是在組件中的表單裏綁定和在頁面上綁定不一樣，這裏也記錄下（這裏只是一個簡單寫法，官網上說使用的時候直接v-model也可以，但是沒有調試通，容後再說）

HTML：
<div id="d1">
	<com-demo :value="values" @input="searchText"></com-demo>
</div>

JS：
Vue.component("com-demo",{
	props:["value"],
	template:
	`
	<div>
		<input 
			:value="value" 
			@input="$emit('input',$event.target.value)"
		/>
	</div>
	`
})
var vm = new Vue({
	el:"#d1",
	data:{
		values:""
	},
	methods:{
		searchText(da){
			console.log(da)
			this.values = da
		}
	}
})

5、插槽，用於向組件內部插入自定義內容

HTML：
<div id="d1">
	<slot-demo>slot標籤位置添加數據</slot-demo>
</div>

JS：
Vue.component("slot-demo",{
	template:`
		<div>
			<h2>這裏是原本組件代碼</h2>
			<h2>
				<slot></slot>
			</h2>
		</div>
	`
})

var vm = new Vue({
	el:"#d1"
})