Vue--组件间的数据共享(传值)

2021/9/23 6:10:50

本文主要是介绍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--组件间的数据共享(传值)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程