Vue组件入门 组建介绍——组件传值 ！！！

一、vue组件的概念：

---

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

commonJS，AMD，CMD是把JS逻辑进行模块化

vue组件是把页面（html代码，CSS代码）进行模块化

如下图所示，一个页面分四个部分，每个部分是个vue组件，而页面成了vue组件的容器。

二、 使用组件

   vue.js中创建组件有三个步骤：创建组件构造器，注册组件以及使用组件

• 1、 定义组件(创建组件构造器)（三种）
• 2、 注册（声明）组件（两种）
• 3、 使用组件
  示例：
  代码示意图：
  

<div id="app1">		
	<!--在app1里可以使用全局注册的组件my-p -->
	<my-p></my-p>
</div>
<div id="app2">			
	<!--在app2里也可以使用全局注册的组件my-p -->
	<my-p></my-p>
</div>
 
<script type="text/javascript">
//1、定义组件构造器：
let myCom = Vue.extend({
	template:"<p>我是p</p>"
});
//2、注册全局组件（相当于自定义标签）
Vue.component("my-p",myCom);
//3、创建两个vue实例，都可以使用全局组件 my-p，具体使用的代码在HTML中。
let v1 = new Vue({
	el:"#app1"
});
let v2 = new Vue({
	el:"#app2"
});
</script>

三、组件传值

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',
	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>