浅析vue中的组件传值
时间：2022-11-03 10:31:31|栏目：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>
