浅析vue中的组件传值

目录

• 一、正向传值
• 验证写法 props验证
• 更多验证
• 二、逆向传值
• 自定义事件
• 实现逆向传值
• 三、同胞传值/兄弟传值
• low的方式（了解）
• 中央事件总线 eventBus

前言：

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

一、正向传值

基本写法：

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>

到此这篇关于浅析vue中的组件传值的文章就介绍到这了,更多相关vue组件传值 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！