04-Vue组件

八. 组件

8.1 组件化

为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块
组件化 :从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一

8.2 三种方式创建组件

8.2.1 vue.extend 创建全局组件

var com1= Vue.extend({
			//通过template 属性 指定了 组件要展示的HTML结构
			template:'<h1>你好一号组件</h1>'
})

8.2.2 Vue.component

Vue.component('mycom1',Vue.extend({
	template:'<h1>你好二号组件</h1>'
})

8.2.3 组件模块对象

var login ={
	template:'<h1>你好三号组件</h1>'
}

8.2.4 通过template元素来定义组件的html模块

html代码:

<div id="app">
	<mycom></mycom>
</div>
<template id="tem">
//组件中的template属性 指向的模板内容，有且只能有唯一的根元素来进行包裹！所以要通过div来包裹
	<div>
		<h1> 通过template元素  来定义组件的html模块 </h1>
	<span> 很好很好 </span>
	</div>
</template>

vue代码:

Vue.component('mycom',{
		template:'#tem'
})

8.2.5 自定义私有组件

html代码:

<div id="app">
	<mycom></mycom>
</div>
<div id="app2">
	<show></show>
</div>
<template id="tem2">
	<h1> 定义私有组件 </h1>	
</template>

vue代码:

Vue.component('mycom',Vue.extend({
	template:'<h1>你好,全局组件</h1>'
})

var vm =new Vue({
	el:'#app',
	data:{},
	methods:{}	
})
var vm1 =new Vue({
			el:'#app2',
			data:{},
			methods:{},
			components:{ //定义私有组件
				show:{
					template:'#tem'
				}
		}
})

8.3 组件中的data和methdos

组件中的data 是 一个的方法并且方法内部返回一个对象

组件中 的data 使用方式与实例中的data方式一样

html代码:

<div id="app">
			<mycom1></mycom1>
		</div>
		
		<template id="tem">
			<div>
				<h1>你好，这是组件++ {{msg}}</h1>
				<input type="button" value="组件按钮" @click="mycom"/>
			</div>
</template>

vue代码:

Vue.component('mycom1',{
			template:'#tem',
			//组件中 的data 是 一个的方法并且方法内部返回一个对象
			//组件中 的data  使用方式与实例中的data方式一样
			data:function(){
				return {
					msg:'我是组件'
				}
			},
			methods:{
				mycom(){
				   console.log('这是组件的方法')
				}
			}
		})
		
		var vm =new Vue({
			el:'#app',
			data:{},
			methods:{
				
			}
		})

8.4 组件之间的传值和调用方法

8.4.1 props

1.子组件自定义绑定父组件的data 数据
2父组件将绑定属性名称 放到 props数组定义一下，子组件就可以使用这个属性了

html代码:

<div id="app">
	<!-- 父组件将传给子组件的数据 通过属性绑定 传递到子组件内部-->
	<com v-bind:parentmsg='msg'></com>
</div>

vue代码:

//子组件默认不能获取父组件的data上的数据和methods的方法
var vm =new Vue({
	el:'#app',
	data:{
		msg:'123-父组件'
	},
	methods:{},
	components:{
		//组件中的props数据都是通过父组件传递给子组件的
	com:{
		//子组件的data属性中数据是子组件私有的 子组件通过ajax请求回来的值 都可以存放到data中
		//data数据可读可写
		data:function  () {
			return {
				num:123
			}
		},
		template:'<h2>注册页面  === {{parentmsg}}</h2>',
		//将父组件传递过来的 parentmsg 属性 现在props数组中定义一下才能使用这个数据
		//props的数据只读 不能重新赋值
		props:['parentmsg']
	}
}
})

8.4.2 this.$emit()

1.子组件 绑定事件 调用 子组件内部的方法
2.子组件使用this.$emit() 触发父组件的自定义事件
3.父组件自定义绑定的事件 调用父组件的方法并传值

html代码:

<div id="app">
			<com @func="show"></com>
</div>
<template id="tem">
			<div >
				<input type="button" value="子组件的按钮" @click="myclick"/>
				<p>看看</p>
			</div>
</template>

vue代码:

var com ={
			template:'#tem',
			data:function  () {
				return {
					list:{name:'我是子组件' ,age:1}
				}
			},
			methods:{
				myclick(){
					// console.log('ok');
					// 子组件可以使用 $emit 触发父组件的自定义事件。
					this.$emit('func',this.list)
		}
	}
}
		
var vm =new Vue({
			el:'#app',
			data:{
				fromson:null
			},
			methods:{
				show(data){
					// console.log("调用了父组件的方法--"+data);
					// console.log(data);
					this.fromson=data
					console.log(this.fromson);
				}
			},
			components:{
				com
			}
})

8.4.3 tihs.$ref()

父组件可以通过 tihs.$ref() 获取DOM元素 和 组件 组件的数据 ，方法

html代码:

<div id="app">
			<input type="button" value="获取元素" @click="myclick"/>
			<h1 ref='myh1'>哈哈哈哈哈</h1>
			<login ref='mylogin'></login>
</div>
		
<template id="tem">
			<div>
				<h1>你好你好</h1>
			</div>
</template>

vue代码:

var login={
			template:'#tem',
			data:function (){
				return{
					name:'我是子组件的数据'
				}
			},
			methods:{
				look(){
					console.log('调用了子组件的方法'+this.name);
				}
			}
}
		
var vm =new Vue({
			el:'#app',
			data:{},
			methods:{
				myclick(){
					//通过ref获取 dom元素
					console.log(this.$refs.myh1.innerText)
					//通过ref获取 组件 组件的数据 方法
					console.log(this.$refs.mylogin.name);
					this.$refs.mylogin.look()
				}
			},
			components:{
				'login':login
			}
})