vue2.x与3.x组件

组件

什么是组件

为了拆分vue实例的代码量，用不同各组件划分不同的功能，需要什么功能就调用什么组件。封装可服用的代码集合。

组件化和模块化

• 模块化是从代码逻辑的角度进行划分的，保证每个模块功能的单一
• 组件化是从ui界面的角度划分的，前端的组件化，方便ui的重用

定义组件

全局注册

1. Vue.extend()创建

var coml = Vue.extend({
	template:'<h1>这是vue组件<h1>'
});
Vue.component('my-coml',coml);

<my-coml></my-coml>

2. Vue.component()创建

Vue.component('mycoml2',{
	template:'<h1>这是一个vue组件</h1>'
});

<my-coml></my-coml>

3. template元素创建

<template id="temp">
	<div>
		<h1>这是一个vue组件</h1>
	</div>
</template>
Vue.component('mycoml3',{
	template:'#temp'
});

定义私有组件

var app=new Vue({
	components:{
	"login":{
	data(){
		return {
			count:1
		}
	},
		template:'<h2>这是一个私有组件</h2>'
	}
}
});

组件中的data和methods

Vue.component('mycoml2',{
data(){
	return {
		count:1
	}
},
	template:'<h1>这是一个vue组件</h1>'
});

组件可以有自己的data
组建的data和vue实例的data不一样，vue实例的data是一个对象，组件里的data是一个函数
组件中的data是一个函数，必须返回一个对象
组件中的data的数据和实例中data的数据使用方式一样

组件嵌套

Vue.component("parent1",{
	data(){
		return {
			message:"1好父组件"
	}
	}，
	components:{
		"child-1":{
			data(){
				return {
					message:"1号子组件"
					}
				}
		}
	}	
});
var app=new Vue({
	
});

父组件向子组件传值

父组件可以在引用子组件的时候，通过属性绑定的时候，把需要传递给子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用

<div id="app">
	<coml v-bind:parentmsg="msg"></coml>
</div>
var vm = new Vue({
	el:'#app',
	data:{},
	methods:{},
	components:{
	// 子组件中默认无法访问父组件中的数据
	coml:{
		template:'<h1>这是子组件{{parentmsg}}<h1>',
		props:['parentmsg']
		}
	}
});

props中的数据都是只读的，data中的数据是可读可写的

父组件把方法传递给子组件

父组件向子组件传递方法使用事件绑定 v-on 当我们定义了一个事件属性之后，子组件就能够通过某种方式，来调用传递进去的方法了

<div id="app">
	<coml v-on:parentmethod="show"></coml>
</div>
var vm = new Vue({
	el:'#app',
	data:{},
	methods:{
	show(){
		console.log('调用了父组件的方法');
	}
},
	components:{
	// 子组件中默认无法访问父组件中的数据
		coml:{
			methods:{
				myclick(){
					this.$emit('parentmethod');
				}
			}
		}
	}
});

使用 this.$refs操作元素

ref是英文单词 reference 的缩写

<div ref="mydiv"> <div>
var vm = new Vue({
	el:,
	data:{},
	methods:{
		getElement(){
			this.$refs.mydiv.innerHTML;
		}
}
});

Vue3.x

在vue3.x版本中组件中新增emits，可以把声明的自定义事件放在emits中，通过$emit触发，工父组件监听。
emits一般情况下为数组，将组件的自定义事件放入存入其中即可

emits:['toggle']

在需要对事件进行验证的情况下emits是一个对象

emits：{
	toggle:function(value){
		if(typeof value === 'string'){
				return true;
		}else{
			return false;	
		}
	},
	close:null // null表明是不需要进行验证的
}
this.$emit('toggle', 'hello')

验证函数的参数是触发事件时传递的数据，如果验证函数返回的是false，则验证不通过,如果为true，则验证通过

在 Vue3.x 版本中，$on 方法被删除，不能通过EventBus方式监听应用中触发的事件。