亲宝软件园·资讯

展开

vue组件传值 

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

更多验证

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实例

// 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>

加载全部内容

相关教程
猜你喜欢
用户评论