Vue父子组件之间传值、兄弟组件之间传值、子组件调用父组件方法（有例子方便理解）

本文主要是介绍Vue父子组件之间传值、兄弟组件之间传值、子组件调用父组件方法（有例子方便理解），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

父子组件之间传值

父传子：父组件向子组件传值props，父组件嵌套的子组件的Child1中，使用(简写:)v-bind:pardata="pardata"进行属性的绑定，并传递这个值
子传父：子组件在button通过绑定一个事件childdatasend，在这个事件通过$emit把值传给父组件，父组件通过(简写@)v-on:进行事件的绑定子组件传过来的事件名childdatasend（即代码表示@childdatasend=“xxx”），然后在methods使用该方法获取到值并使用即可

父组件的代码：

<template>
	<div id="app">
		我是父组件:{{jieshoudata}}
		<Child1 :pardata="pardata" @childdatasend="childdatasend"></Child1>
		<Child2></Child2>
	</div>
</template>

<script>
import Child1 from '../components/child1.vue'
import Child2 from '../components/child2.vue'
export default{
	
	data(){
		return{
			pardata:'你好，我是父组件的值521',
			jieshoudata:'',
		}
	},
	methods:{
		childdatasend(value){ //直接接受子组件传过来的值
			this.jieshoudata=value
		}
	},
	components:{
		Child1,
		Child2
	}
}
</script>

<style lang="less" scoped>
	
</style>

子组件的代码

<template>
	<div id="app">
		<h2>我是子组件一</h2>
		<div style="margin-top: 20px;">
			我是父组件传过来的值：{{pardata}}
		</div>
		<div>
			<button @click="childdatasend">传值给父组件</button>
		</div>
	</div>
</template>

<script>
	import bus from '../../utils/EventBus.js'
	export default{
		props:['pardata'],
		data(){
			return{
				childdata:'我是子组件的值520'
			}
		},
		methods:{
			childdatasend(){
				this.$emit('childdatasend', this.childdata)
			}
		}
	}
</script>

<style lang="less" scoped>
	
</style>

结果如图所示
== 在这里插入图片描述

在这里插入图片描述

兄弟组件之间传值

1、兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据

2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。

3、传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)。

4、接收数据方，通过mounted(){}触发bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。

实例如下我们单独创建一个EventBus.js,内容如下

import Vue from 'vue'

export default new Vue;

父组件的代码:

<template>
	<div id="app">
		我是父组件:{{jieshoudata}}
		<Child1 :pardata="pardata" @childdatasend="childdatasend"></Child1>
		<Child2></Child2>
	</div>
</template>

子组件一的代码：重点通过bus.$emit传递

<template>
	<div id="app">
		<h2>我是子组件一</h2>
		<div style="margin-top: 20px;">
			我是父组件传过来的值：{{pardata}}
		</div>
		<div>
			<button @click="childdatasend">传值给父组件</button>
			<button @click="SendMsg">传值给兄弟2组件</button>
		</div>
	</div>
</template>

<script>
	import bus from '../../utils/EventBus.js'
	export default{
		props:['pardata'],
		data(){
			return{
				childdata:'我是子组件的值520'
			}
		},
		methods:{
			//兄弟组件传值事件 
			SendMsg(){
				bus.$emit('sendbrodata', '您好，我是子组件一传给子组件二的值')
			},
		}
	}
</script>

<style lang="less" scoped>
	
</style>

子组件二的代码：

<template>
	<div id="app">
		<h2>我是子组件二</h2>
		<p>从子组件一接收到的值:{{msg}}</p>
	</div>
</template>

<script>
	import bus from '../../utils/EventBus.js'
	export default{
		data(){
			return{
				msg:'子组件二默认的值'
			}
		},
		mounted() {
			//通过bus.$on接收子组件一传过来的值 如果不是箭头函数要注意this的指向问题
			bus.$on("sendbrodata", (msg)=>{
				this.msg = msg
			})
		}
	}
</script>

<style lang="less" scoped>
	
</style>

结果如图所示
在这里插入图片描述

子组件调用父组件方法

Vue中子组件调用父组件的方法，有三种方法如下：

1.直接在子组件中通过this.$parent.event来调用父组件的方法

父组件的代码：重点是fathermethod方法

<template>
	<div id="app">
		我是父组件:{{jieshoudata}}
		<Child1 :pardata="pardata" @childdatasend="childdatasend"></Child1>
		<Child2></Child2>
	</div>
</template>

<script>
import Child1 from '../components/child1.vue'
import Child2 from '../components/child2.vue'
export default{
	
	data(){
		return{
			pardata:'你好，我是父组件的值521',
			jieshoudata:'',
		}
	},
	methods:{
		childdatasend(value){ //直接接受子组件传过来的值
			this.jieshoudata=value
		},
		//重点是这里父组件的方法
		fathermethod(){
			console.log('这是父组件的方法')
		}
	},
	components:{
		Child1,
		Child2
	}
}
</script>

<style lang="less" scoped>
	
</style>

子组件的代码：绑定一个button事件直接通过this.$parent.fathermethod调用

<template>
	<div id="app">
		<h2>我是子组件二</h2>
		<p>从子组件一接收到的值:{{msg}}</p>
		<button @click="child2click">this.$parent.event直接调用父组件的方法</button>
	</div>
</template>

<script>
	import bus from '../../utils/EventBus.js'
	export default{
		data(){
			return{
				msg:'子组件二默认的值'
			}
		},
		mounted() {
			//通过bus.$on接收子组件一传过来的值 如果不是箭头函数要注意this的指向问题
			bus.$on("sendbrodata", (msg)=>{
				this.msg = msg
			})
		},
		methods:{
			child2click(){
				this.$parent.fathermethod();
			}
		}
	}
</script>

<style lang="less" scoped>
	
</style>

结果如图所示
在这里插入图片描述

第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。

子组件的代码：

<template>
	<div id="app">
		<h2>我是子组件二</h2>
		<p>从子组件一接收到的值:{{msg}}</p>
		<button @click="child2click">this.$parent.event直接调用父组件的方法</button>
		<button @click="emitclick">$emit向父组件触发一个事件</button>
	</div>
</template>

<script>
	import bus from '../../utils/EventBus.js'
	export default{
		data(){
			return{
				msg:'子组件二默认的值'
			}
		},
		mounted() {
			//通过bus.$on接收子组件一传过来的值 如果不是箭头函数要注意this的指向问题
			bus.$on("sendbrodata", (msg)=>{
				this.msg = msg
			})
		},
		methods:{
			//第一种
			child2click(){
				this.$parent.fathermethod();
			},
			重点是这里--第二种
			emitclick(){
				this.$emit('fathermethod')
			}
		}
	}
</script>

<style lang="less" scoped>
	
</style>

父组件的代码：

<template>
	<div id="app">
		我是父组件:{{jieshoudata}}
		<Child1 :pardata="pardata" @childdatasend="childdatasend"></Child1>
		<Child2 @fathermethod="fathermethod"></Child2> <!--第二种方法 父组件监听子组件传过来的事件  子组件就可以直接调用了-->
	</div>
</template>

<script>
import Child1 from '../components/child1.vue'
import Child2 from '../components/child2.vue'
export default{
	
	data(){
		return{
			pardata:'你好，我是父组件的值521',
			jieshoudata:'',
		}
	},
	methods:{
		childdatasend(value){ //直接接受子组件传过来的值
			this.jieshoudata=value
		},
		fathermethod(){
			console.log('这是父组件的方法')
		}
	},
	components:{
		Child1,
		Child2
	}
}
</script>

<style lang="less" scoped>
	
</style>

第三种方法：是父组件把方法传入子组件中，在子组件里直接调用这个方法，子组件通过props接收的时候接收一个对象如这样接收
props:{
fathermethod2:{
type:Function,
default:null
}
},

父组件代码：

<template>
	<div id="app">
		我是父组件:{{jieshoudata}}
		<Child1 :pardata="pardata" @childdatasend="childdatasend"></Child1>
		<Child2 @fathermethod="fathermethod" :fathermethod2="fathermethod2"></Child2> 
		<!--第三种方法 是父组件把方法传入子组件中，在子组件里直接调用这个方法-->
	</div>
</template>

<script>
import Child1 from '../components/child1.vue'
import Child2 from '../components/child2.vue'
export default{
	
	data(){
		return{
			pardata:'你好，我是父组件的值521',
			jieshoudata:'',
		}
	},
	methods:{
		childdatasend(value){ //直接接受子组件传过来的值
			this.jieshoudata=value
		},
		fathermethod(){
			console.log('这是父组件的方法')
		},
		//第三种方法测试
		fathermethod2(){
			console.log('这是父组件的方法2')
		}
	},
	components:{
		Child1,
		Child2
	}
}
</script>

<style lang="less" scoped>
	
</style>

子组件的代码：

<template>
	<div id="app">
		<h2>我是子组件二</h2>
		<p>从子组件一接收到的值:{{msg}}</p>
		<button @click="child2click">this.$parent.event直接调用父组件的方法</button>
		<button @click="emitclick">$emit向父组件触发一个事件</button>
		<button @click="threeclick">第三种方法：组件把方法传入子组件中，在子组件里直接调用这个方法</button>
	</div>
</template>

<script>
	import bus from '../../utils/EventBus.js'
	export default{
		//重点是这里
		props:{
			fathermethod2:{
				type:Function,
				default:null
			}
		},
		data(){
			return{
				msg:'子组件二默认的值'
			}
		},
		mounted() {
			//通过bus.$on接收子组件一传过来的值 如果不是箭头函数要注意this的指向问题
			bus.$on("sendbrodata", (msg)=>{
				this.msg = msg
			})
		},
		methods:{
			//第一种子组件直接通过this.$parent.event直接调用父组件的方法
			child2click(){
				this.$parent.fathermethod();
			},
			//第二种
			emitclick(){
				this.$emit('fathermethod')
			},
			重点是这里-第三种
			threeclick(){
				if(this.fathermethod2){
					this.fathermethod2();
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	
</style>

这篇关于Vue父子组件之间传值、兄弟组件之间传值、子组件调用父组件方法（有例子方便理解）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Javascript

Vue父子组件之间传值、兄弟组件之间传值、子组件调用父组件方法（有例子方便理解）

父子组件之间传值

兄弟组件之间传值

子组件调用父组件方法

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯