Vue子组件给父组件传值 父组件给子组件传值 demo 示例代码

QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票

Vue子组件给父组件传值 需要使用自定义事件

流程:

1.子组件创建并监听自定义事件,

2.在事件函数里面执行emit函数,通过emit把想传的值传给父组件

3.父组件在子组件上监听emit定义的事件名称并绑定自身的函数,在函数的参数中接收子组件传递的参数。

效果图:

实现代码:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Vue 父组件和子组件相互传值demo</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
	</head>

	<body>
		<div id="app">
			<div id="counter-event-example">
				<p>{{ total }}</p>

				<!--这里使用了两个子组件,因为子组件的data是函数,所以它们的值互不影响-->
				<!--父组件在使用子组件的地方直接用 v-on 来监听子组件触发的事件。-->
				<button-counter v-bind:idx="1" v-on:increment="appAddCounter"></button-counter>
				<button-counter v-bind:idx="2" v-on:increment="appAddCounter"></button-counter>
			</div>
		</div>

		<script>
			Vue.component('button-counter', {
				//1.使用 $on(eventName)监听事件
				template: '<button v-on:click="addCounter">第{{idx}}个子组件: {{ counter }}</button>',
				props:['idx'],
				data: function() {
					return {
						counter: 0
					}
				},
				methods: {
					//子组件的自定义事件  
					addCounter: function() {
						this.counter += 1;
						var str ='我是第'+this.idx+'个子组件,我的值为:'+this.counter;
						//2.使用 $emit(eventName,obj) 触发事件   
						//increment: 是父组件指定的传数据绑定的函数,str: 子组件给父组件传递的数据
						this.$emit('increment',str);
					}                                                                                                                                                            
				},
			})
			new Vue({
				el: '#counter-event-example',
				data: {
					total: 0
				},
				methods: {
					appAddCounter: function(e) {
						console.log('子组件传的值:',e)
						this.total += 1
					}
				}
			})
		</script>
	</body>

</html>

 

相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值