Vue两个同级组件传值

Vue组件之间是有联系的,避免不了组件之间要互相传值,
父给子使用v-bind绑定自定义属性和使用props来接受
子给父使用@自定义事件='函数' this.$emit('自定义事件','要发送的内容'),子组件通过$emit来触发父组件的函数来实现
但是两个同级组件之间这么互相传值

<div id='app'>
	<children1></children1>
	<children2></children2>
</div>
<script>
 	var children1 = {};
 	var children2 = {};
	var vm = new Vue({
		el:'#app',
		components:{
			children1,
			children2
		}
	})
</script>

现在要将children1组件中的数据传给children2组件
主要使用到vue实例中的$on()和$emit()

	<div id='app'>
		<children1></children1>
		<children2></children2>
	</div>
	<script>
	    var Event = new Vue({}); // 创建一个vue实例用来作为传值的媒介
	 	var children1 = {
			template:`
				<div>
					<button @click='send'>点我给children2组件发送数据</button>
				</div>
			`,
			data(){
				return {
					msg:'我是要给children2发送的数据'
				}
			},
			methods:{
				send(){ 
					Event.$emit('go',this.msg) 
				}
			}
		};
	 	var children2 = {
			template:`
				<div>
					<h2>从children1组件接收到的值:{{msg1}}</h2>		
				</div>
			`,
			data(){
				return{
					msg1:''
				}
			},
			created(){
				Event.$on('go',(v) => { // 必须使用箭头函数因为this
					this.msg1 = v;
				})
			}
		};
		var vm = new Vue({
			el:'#app',
			components:{
				children1,
				children2
			}
		})
</script>

在这里插入图片描述
chilren1组件要发送数据使用的是Event.$emit()
chilren2组件要接收数据使用Eevent.$on()

  • 1
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值