Vue入门（2）组件

组件

组件是可复用的 Vue 实例，且带有一个名字。 组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。

1.局部组件的创建

<div id="app">
	<Child></Child>		//局部组件的使用
</div>

<script>
	//局部组件的声明
	var Child = {
		template: '<p>This is a component</p>'
	};
	var vm = new Vue({
		el: '#app',
		components: {	//局部组件的挂载
			//Child : Child
			Child		//简写
		}
	});
</script>

2.全局组件的创建

第一个参数为组件的名字，第二个参数为options

Vue.component("Vbtn",{
	template : `
		<button>按钮</button>
	`,
})

组件传值

1.通过props往子组件传值

1. 先给父组件中绑定自定义的属性
2. 在子组件中使用props接收父组件传递的数据
3. 在子组件中就可以任意使用了

<script>
Vue.component("Parent",{
	data(){
		return{
			msg : "我是父组件的数据"
		}
	},
	template : `
		<div>
			<p>我是父组件-----{{msg}}</p>
			<Child :childData='msg'/>		//第一步
		</div>
	`,
})

Vue.component("Child",{
	template : `
		<div>
			<p>我是子组件</p>
			<p>我正在使用父组件的数据 －－－ {{childData}}</p>	//第三步
		</div>
	`,
	props : ["childData"]			//第二步
})

new Vue({
	el: '#app',
	data: function(){
		return {

		}
	},
	template : `
		<Parent />
	`
})
</script>

2.通过事件往父组件传值

1. 在父组件绑定自定义事件
2. 在子组件中触发原生的事件，在函数中使用$emit触发自定义的事件

<script>
	Vue.component("Parent",{
		data(){
			return{
				msg : "我是父组件的数据"
			}
		},
		template : `
			<div>
				<p>我是父组件</p>
				<Child :childData='msg' @childHandler='childHandler'/>	//第一步
			</div>
		`,
        methods : {
            childHandler(val){
                console.log(val);
            }
        }
	})

	Vue.component("Child",{
		template : `
			<div>
				<p>我是子组件</p>
				<input type="text" v-model="childData" @input='changeValue(childData)'/>	//第二步
			</div>
		`,
		props : ["childData"],
        methods : {
            changeValue(val){
                //$emit方法第一个参数为自定义事件名，第二个参数为传递的消息
                this.$emit('childHandler',val)
            }
        }
	})

	new Vue({
		el: '#app',
		data: function(){
			return {

			}
		},
		template : `
			<Parent />
		`
	})
</script>