组件

一、定义Vue组件
什么是组件：组件的出现，就是为了拆分 vue 实例代码量，能够让我们以不同的组件来划分不同的功能模块，将来根据功能的需要，调用对应的组件。
组件化和模块化的区别：
模块化：是从代码逻辑的角度进行划分，方便代码分层开发，保证每个模块的功能单一
组件化：是从UI界面的角度进行划分，前端的组件化，方便UI组件的重用

1.1 创建组件的方式一

<div id="app">
<!--如果使用组件，直接把组件名以html标签的形式引入到页面即可-->
	<mycom1></mycom1>
</div>

<script type="text/javascript">
	//1.1 使用Vue.extend 来创建全局的 Vue 组件
	var com1=Vue.extend({
		template:'<p>我是一个由Vue.extend 创建出来的p</p>'
})

			
//1.2 使用Vue.component('组件名'，创建出来的组件模板对象)
//如果使用Vue.component 定义全局组建的时候，参数一是组件名称，
	//如果使用了驼峰命名，在引用组件的时候需要把大写的驼峰转为小写，同时在两个单词使用 - 连接
   //如：Vue.component('myCom1',com1),引用时： <my-com1></my-com1>
	//如果不使用驼峰，则直接将名称拿来使用即可
Vue.component('mycom1',com1)

上面的script代码可以简写成下面的形式：
Vue.component('mycom1',Vue.extend({
	template:'<h2>我是简写的h2</h2>'
}))

1.2 创建组件方式二

//注意：不论是那种方式创建出来的组件，template 属性指向的模板内容必须有且只有一个根元素
//不能写为：template:‘我是由Vue.component创建出来的组件

123

’

Vue.component('mycom2',{
	template:'<span>我是由Vue.component创建出来的组件</span>'
})

1.3 创建组件方式三
1 script 代码

Vue.component('mycom3',{
	template:'#temp'
})

2 样式应用

<div id="app">
	<mycom3></mycom3>
</div>


<!--在被控制的 #app 外面，使用template元素，定义组件模板-->
<template id="temp">
	<div>
    	<h1>我是template元素定义的组件</h1>
		<p>我是一个p</p>
	</div>
</template>

1.4 定义私有组件

var vm=new Vue({
	el:'#app',
	data:{},
	methods:{},
	components:{ //定义私有组件
		login:{
			template:'#temp2'
		}
	}
});

组件的应用：

<div id="app">
	<login></login>
</div>
		
<template id="temp2">
	<div>
		<p>我是私有组件</p>
	</div>
</template>

1.5 组件中的data

<div id="app">
	<mycom1></mycom1>
</div>
		
<template id="temp">
	<div>
		{{msg}}
	</div>
</template>

		
//组件可以有自己的data 数据
//组建的data数据和 实例的data数据不同点，实例的data是一个对象，但是组件的data必须是一个方法
//组件的中data 除了是一个方法之外，在方法内部，还必须返回一个对象才行
//组件中的data数据，使用方式和实例中的data一样
Vue.component('mycom1',{
	template:'#temp',
	data:function(){
		return {
			msg:'这是组件中data定义的数据'
		}
	}
})

二、组件实现切换

2.1 使用v-if和v-else结合flag实现切换

<div id="app">
	<a href="#" @click.prevent="flag=true">登录</a>
	<a href="#" @click.prevent="flag=false">注册</a>
			
	<login v-if="flag"></login>
	<register v-else="flag"></register>
</div>
<script type="text/javascript">
	Vue.component('login',{
		template:'<p>登录</p>',				
	})
	Vue.component('register',{
		template:'<p>注册</p>',				
})

2.2 使用Vue提供的component 元素实现组件的切换

<div id="app">
	<a href="#" @click.prevent="comName='login'">登录</a>
	<a href="#" @click.prevent="comName='register'">注册</a>
			
	<!--Vue提供了 component 来展示对应名称的组件-->
	<!--component 是一个占位符，is后面是用来指定要展示的组件名陈-->
	<component :is="comName"></component>
</div>
<script type="text/javascript">
	Vue.component('login',{
		template:'<p>登录</p>',				
	})
	Vue.component('register',{
		template:'<p>注册</p>',				
})

三、组件传值
3.1 父组件向子组件传递值（data 和props）
在script标签中

var vm=new Vue({
	el:'#app',
	data:{
		msg:'123,父组件'
	},
	methods:{},
	components:{
		mylogin:{
			template:'<h1>这是子组件----{{parentmsg}}</h1>',
			props:['parentmsg']
		}
	}
});

应用：

<div id="app">
	<mylogin v-bind:parentmsg="msg"></mylogin>
</div>

3.2 父组件向子组件传递方法

<script type="text/javascript">
	var login={
		template:'#temp',
		data(){
			return {
				sonmsg:{age:5,name:'柯南'}
			}					
		},
		methods:{
			myclick(){
                   /*父组件通过this.$emit('func')来向子组件传递方法，
			* 第二个参数为传递过去的函数的参数，可以为多个*/
				this.$emit('func',this.sonmsg)
			}
		}
	}
			
	var vm=new Vue({
		el:'#app',
		data:{
			datamsg:null
		},
		methods:{
			show(data){
				/*console.log('我是父组件的方法')*/
				this.datamsg=data
				}
		},
		components:{
			mylogin:login
		}
	});
</script>

应用：

<div id="app">
    <!--父组件向子组件传递方法，使用的是事件绑定机制，v-on：,绑定
    后面的名字func要与下面代码中的this.$emit('func')保持一致-->
	<mylogin @func="show"></mylogin>
</div>
<template id="temp">
	<div>
		<h1>我是子组件</h1>
		<input type="button" value="父组件向子组件传递方法" @click="myclick"/>
	</div>
</template>