1、父组件和子组件 

首先在解释props和$emit的用法之前,先来明确一下在vue中何为父组件、子组件。

一句话总结:被调用的为子组件,调用者为父组件。举个例子如下所示:

子组件:

	var vm = new Vue({
		el:'#app',
		methods:{
			counter:function(e){
				console.log(e)
			}
		},
		data:{
			name:"my name is eve"
		},
		
		components:{
			mycomponent:{
				props:{
					title:String,   
				},
				data:function(e){
					return {
						counter:5
					}
				},
				/*在自定义的组件模板内部可以通过click事件绑定事件
				  事件需要写在methods成员里面 */

//这里是子组件
template:'<button v-on:click="mycomponent_click">{{title}}点击数量为{{counter}}</button>',
//这里是子组件

				methods:{
					
					mycomponent_click:function(e){
						this.counter = this.counter+this.counter
						this.$emit('getcounter',this.counter)
					},
					
				},
			}
		}

	})

在上述代码中,我们自定义了一个名为mycomponent的模板,模板内容为一个button

template:'<button v-on:click="mycomponent_click">{{title}}点击数量为{{counter}}</button>'

并给定了它的props属性,data属性和methods属性,这个模板后续将会作为自定义组件共其他页面调用。我们再来看父组件:

<body>
	<div id = 'app'>
		<mycomponent v-bind:title = 'name' v-on:getcounter = "counter"></mycomponent>
		<mycomponent title = 'name' v-on:getcounter = "counter"></mycomponent>
	</div>
</body>

我们可以看到,在这个页面中,调用了mycomponent组件,因为这里的<mycomponent>标签内的所有内容均称之为父组件。即:父组件和子组件的关系是调用者与被调用者的关系。

2、props的用法

对于props的用法可以总结为以下2点:

1、父组件使用props把数据传给子组件

2、props只能在子组件内定义,在父组件和子组件内都能使用,通常在父组件中使用props用以修改子组件的值。

首先,附上完整部分的代码:

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src = "vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id = 'app'>
			<!-- 第一行为动态赋值,第二行为静态赋值 -->
			<mycomponent v-bind:title = 'name' v-on:getcounter = "counter"></mycomponent>
			<mycomponent title = 'name' v-on:getcounter = "counter"></mycomponent>
		</div>
	</body>

	<script>
	var vm = new Vue({
		el:'#app',
		methods:{
			counter:function(e){
				console.log(e)
			}
		},
		data:{
			name:"my name is eve"
		},
		components:{
			mycomponent:{
				props:{
					title:String,  //这样也是可以的
				},
				data:function(e){
					return {
						counter:5
					}
				},
				template:'<button v-on:click="mycomponent_click">{{title}}点击数量为{{counter}}</button>',
				methods:{
					mycomponent_click:function(e){
						this.counter = this.counter+this.counter
						this.$emit('getcounter',this.counter)
					},
					
				},
			}
		}

	})
	</script>

代码并不难理解,在new Vue()方法中,通过全局注册的方式定义了一个名为mycomponent的自定义模板,作为子组件。在html中,<mycomponent>标签调用了该模板,作为父组件。而props存在的意义就是为了建立起父组件和子组件之间的通信关系(联系)。

在子组件中定义了名为title的变量,初试类型设置为字符String类型。

在子组件的模板中,我们使用了这个title的变量,通过{{}}双大括号的形式获取该变量的值(此时此刻该变量为空值,因为刚才只指定了title的类型,没有赋值)

props:{
	title:String,  
},
template:'<button v-on:click="mycomponent_click">{{title}}点击数量为{{counter}}</button>'

在父组件中,我们使用v-bind:的形式动态修改了title的值,将name变量的值赋给了title,并随后将该值传递至子组件中,在data中,我们设置了name的值为“my name is eve”。运行后可以看到,子组件的title值已经被我们修改为my name is eve。

<mycomponent v-bind:title = 'name' v-on:getcounter = "counter"></mycomponent>
<mycomponent title = 'name' v-on:getcounter = "counter"></mycomponent>

 在props传值的整个过程中,逻辑如下:

1、子组件中,在props属性下,定义变量,并使用在子组件中。

2、父组件通过在标签内使用该变量名的方式,(通过v-bind:变量名的方式为动态赋值,直接使用变量名为静态赋值),将值从父组件传递至子组件。

3、$emit的用法

对于$emit的用法可以总结为以下2点:

1、子组件通过$emit的方式,调用父组件中的事件 

2、$emit函数只能在子组件中使用 

我们依旧来看这个代码段,在父组件中,通过v-on定义了一个名为getcounter的事件,该事件绑定了一个名为counter的函数,如果该事件被触发,则counter函数被处罚。我们再来看子组件中,通过v-on:click的方式绑定了一个名为mycomponent_click的事件

<mycomponent v-bind:title = 'name' v-on:getcounter = "counter"></mycomponent>
<mycomponent title = 'name' v-on:getcounter = "counter"></mycomponent>
template:'<button v-on:click="mycomponent_click">{{title}}点击数量为{{counter}}</button>'

mycomponent_click:

mycomponent_click:function(e){
	this.counter = this.counter+this.counter
	this.$emit('getcounter',this.counter)
},

这里的逻辑是:

1、当该子组件被点击时,触发mycomponent_click事件,将当前计数器的值加倍。

2、之后执行$emit函数,会调用父组件中名为getcounter的事件,并将counter的值传过去。

3、父组件的getcounter事件会被触发,调用counter函数,在控制台打印出接受到的值。

我们可以看到,当前计数器的值为10,控制台打印的也是10,可以看到已经通过$emit调用了父组件的2021年9月17日12:07:事件并且将值传递了过去。

欢迎转载,请注明出处~

Logo

前往低代码交流专区

更多推荐