超简单的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"
})