Vue--组件间的数据共享（传值）

本文主要是介绍Vue--组件间的数据共享（传值），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

组件之间的关系

1. 父子关系

1.1 父传子——使用自定义属性

• props里的值都不建议去修改

//父组件
<son :msg="message" :user="userinfo"></son>

data(){
	return{
		message:'hello',
		userinfo:{
			name:'张三'，
			age:20
		}
	}
}

//子组件
<template>
	<div>
		<h1>son组件</h1>
		<p>父组件传递过来的msg值：{{msg}}</p>
		<p>父组件传递过来的user值：{{user}}</p>
	</div>

</template>
//自定义属性
props:['msg','user']

1.2 子传父——使用自定义事件

子组件
data(){
	return{
	//子组件的数据，将来希望把count值传给父组件
	count:0;
	}
},
methods:{
	add(){
		this.count += 1
		//修改数据时，通过$emit()触发自定义事件
		//自定义事件名字，要传的值
		this.$emit('numchange',this.count)
	
	}
}

//父组件
<son @numchange="getNewCount"></son>


data(){
	return{
	//定义counyFromSon数据项来接收子组件传递过来的数据
	countFromSon:0
	}
},
methods:{
	//获取子组件传递过来的数据
	getNewCount(val){
		this.countFromSon = val
	}
}

2. 兄弟关系

• 在vue2.x中，兄弟组件之间数据共享的方案时EventBus

//兄弟组件A--发送方
import bus from './eventBus.js'

export default{
	data(){
		return{
			msg:'hello vue'
		}
	},
	methods：{
		sentMsg(){
			bus.$emit('share',this.msg)
		}
	}
}

//eventBus.js
import Vue from 'vue'
//向外共享Vue的实例对象
export default new Vue()

//兄弟组件C--接收方
import bus from './evenBus.js'

export default{
	data(){
		return{
			//从A处接收到的值
			msgFromA:''
		}
	},
	created(){
		//为bus绑定事件
		//share事件被触发，A里的msg会被传到C里的val
		bus.$on('share',val => {
			this.msgFromA = val
		})
	}
}

EventBus的使用步骤

• 3.1 创建eventBus.js模块，并向外共享一个Vue的实例对象
• 3.2 在数据发送方，调用bus.$emit('事件名称',要发送的数据)方法触发自定义的事件
• 3.3 在数据接收方，调用bus.$on('事件名称',事件处理函数)方法注册一个自定义事件

这篇关于Vue--组件间的数据共享（传值）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！