vue中props和$emit的用法详解 Vue新手教程(2)：

最新推荐文章于 2024-06-18 09:00:43 发布

Bupt的小菜狗

最新推荐文章于 2024-06-18 09:00:43 发布

阅读量7.2k

点赞数 6

分类专栏： Vue专栏文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44049213/article/details/120345528

版权

Vue专栏专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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:事件并且将值传递了过去。

欢迎转载，请注明出处~

Bupt的小菜狗

关注

6
点赞
踩
32

收藏

觉得还不错? 一键收藏
4
评论
vue中props和$emit的用法详解 Vue新手教程(2)：

1、父组件和子组件首先在解释props和$emit的用法之前，先来明确一下在vue中何为父组件、子组件。一句话总结：被调用的为子组件，调用者为父组件。举个例子如下所示：子组件： var vm = new Vue({ el:'#app', methods:{ counter:function(e){ console.log(e) } }, data:{ name:"my name is eve" }, components:{ .
复制链接

扫一扫

专栏目录