这篇文章主要介绍了浅析vue中的组件传值，文章基于vue的相关资料展开对主题的详细介绍，具有一定的参考价值，需要的小伙伴可以参考一下

前言：

只要是做项目，组件和组件之间的传值是不可避免的，那么怎样才能完成组件之间的传值呢？我总结了以下几点，若有不足，欢迎补充

一、正向传值

基本写法：

props：[“接收变量1”，“接收变量2”。。。。。。。]

使用：

1，在需要接收数据的子组件中，定义props设置接收变量

<template>
<div>
<!-- 2.直接向变量一样进行使用 -->
zizizizzizizizizizi---{{title}}
</div>
</template>
<script>
export default {
// 1.定义了接收参数
props:["title"]
}
</script>
<style>
</style>

2，父组件传递 

在子组件被调用的位置，父组件给接受数据上传值

<template>
<div>
fufuffufufuf----{{text}}
<!-- 3.子组件接收父组件的数据 -->
<Zi :title="text"/>
<Zib/>
</div>
</template>
<script>
import Zi from "./zi.vue"
import Zib from "./zib.vue"
export default {
data(){
return {
text:"你好我是fufuffu的变量！！"
}
},
components:{
Zi,Zib
}
}
</script>
<style>
</style>

验证写法 props验证

就是在正向传值的时候，有时候需要对传递过来的数据进行格式类型上的约束，传统的proposal写法传递任何内容都是可以的，但是如果要约束，那么我们可以使用props验证的写法，对正向传值归来的数据格式进行验证

语法：

props：{

你定义的接受数据变量：你要的数据类型

}

<template>
<div>
<!-- 2.直接向变量一样进行使用 -->
zizizizzizizizizizi---{{title+6}}
</div>
</template>
<script>
export default {
// 1.定义了接收参数
// props:["title"]
// props验证
props:{
title:Number
}
}
</script>
<style>
</style>

注意： 

proposal验证是验证我们传递参数的时候数据的格式和类型的校验，就算传递的数据类型不符合我们的规则，从用户的角度看不会有影响显示，但是会在控制台有个警告提示

更多验证

1，多种类型

props:{
title:[Number,String]
}

2，默认值 

// 默认值
props:{
title:{
// 类型
type:String,
// 默认值
default:"我是默认值"
}
}

二、逆向传值 

子组件把数据传递给父组件

逆向传值默认是不允许的 要用自定义事件完成

自定义事件

this.$emit("自定义事件名"，“传递给自定义事件的数据”)

实现逆向传值

1，因为逆向传值默认不允许，需要通过事件来触发一个自定义事件抛出

代码：

<template>
<div>
zizizizizizizi
<button @click="btn()">点击逆向传值</button>
</div>
</template>
<script>
export default {
data() {
return {
text:"我是子组件的变量"
}
},
methods: {
btn(){
this.$emit("btn",this.text)
}
},
}
</script>
<style>
</style>

2，在父组件中接收子组件抛出的自定义事件 

<template>
<div>
fufufufuufuf-----------{{futext}}
<Zi @btn="fufun"/>
</div>
</template>
<script>
import Zi from "./zi.vue"
export default {
data() {
return {
futext:""
}
},
components:{
Zi
},
methods: {
fufun(val){
console.log(val);
this.futext=val
}
}
}
</script>
<style>
</style>

ref的方式完成： 

只需要把ref绑定到组件上

三、同胞传值/兄弟传值

low的方式（了解）

两个兄弟组件之间需要传递数据，a组件先逆向传值给父组件，父组件在正向传值给b组件

中央事件总线 eventBus

中央事件总线就是凌驾在我们需要同胞传值的组件之上的一个空的vue实例

• eventBus文件夹就是用来存放中央事件总线这个实例的

• 在新建的文件夹与文件之间创建一个空的vue实例

// 1,创建中央事件总线
import Vue from "vue"
export default new Vue

抛出 

methods: {
fun(){
eventBus.$emit("apao",this.ziatext)
}
}

接收 

$on（）监听实例上的自定义事件

$on（“你要监听的中自定义时间是什么”，（）=》{

console.log（val）

}）

<script>
// 1,引用中央事件总线
import eventBus from "@/eventBus"
export default {
 // 2,通过生命周期的钩子函数来调用$on进行实力上自定义事件的监听
mounted(){
eventBus.$on("apao",(val)=>{
console.log(val);
})
}
}
</script>