vue组件传值

时间:2022-06-03 清城幻影人气:0

前言：

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

一、正向传值

基本写法：

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

二、逆向传值

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

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

自定义事件

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>

加载全部内容