这里列举几个常用的传值方式
一、父子组件传值----正向传值----props(props 是一个属性 )
普通传值 (三步走)
①在data methods同级使用props:[ 接收父组件传值的变量1,接收父组件传值的变量2,....n ]
②在组件中进行使用
③父组件传值
比如父组件(father.vue)中的 “哈喽” 要在子组件中用
<template>
<div>
father
//3.父组件给子组件传递数据(SonText当作属性写)
<Son :SonText="fatherText" SonTit="我是第二个数据"/>
</div>
</template>
<script>
import Son from "./son.vue"
export default {
components:{
Son
},
data(){
return {
fatherText:"哈喽"
}
}
}
</script>
子组件(son.vue)使用:
<template>
<div>
//2.在子组件中使用接收这个变量
Son -------{{SonText}} -----{{SonTit}}
</div>
</template>
<script>
export default {
data(){
return {
}
},
// 1.在子组件设置接受变量
props:["SonText","SonTit"]
}
</script>
传值验证
在传统的props验证的写法中 我们可以给子组件传递任何数据类型的数据
但是在一些特殊情况下这样可能会出问题(就是如果子组件拿到数据需要对数据进行操作的时候 可能不同的数据类型所展示的结果就会出现偏差)
props验证 如果验证不成功 不会影响我们页面展示 他会在控制台给我们一个警告提示我们开发者有问题
语法:
props:{
你要接受的变量 : 数据类型
}
1.在Son.vue组件中,data methods等同级位置 使用 props:{}
<template>
<div>
Son-------------{{title+6}}
</div>
</template>
<script>
export default {
// props:["title"]
// 验证的写法
props:{
// title:Number //我要接受的title必须是数字类型
// title:[Number,Boolean] // 既可以传递number又想传递布尔
// 既想验证数据类型 又想验证不能为空
title:{
type:Number,// 验证数据类型
required:true//不能为空
}
}
}
</script>
二、子父组件传值--------逆向传值 (用的比较少了容易忘记)
逆向传值默认是不被允许的 所以我们如果想进行逆向传值的话 那么我们必须要通过事件来触发传递
①在子组件中创建一个事件触发一个函数 进行逆向传值的准备
②把数据绑定到自定义事件之上
③接收自定义事件使用数据 this.$emit( "你自定义事件的名字",“数据” )
<template>
<div>
Son
<button @click="sonFun()">点我逆向传值</button>
</div>
</template>
<script>
export default {
data(){
return {
SonText:"我是子组件的数据"
}
},
methods:{
sonFun(){
// 使用自定义事件抛出子组件的数据
this.$emit('tian',this.SonText)
}
}
}
</script>
父组件(father.vue)中
<template>
<div>
father
// 父组件接受的这个函数不加()不加()不加()不加()不加()不加()不加()
// <Son @tian="demo()"/> //这样就不行
<Son @tian="demo"/>
</div>
</template>
<script>
import Son from "./son.vue"
export default {
components:{
Son
},
methods:{
demo(text){
console.log('text',text)
}
}
}
</script>
三、兄弟组件传值---- 同胞传值--中央事件总线(eventBus)
就是同一父组件下的子组件进行相互的数据传递
首先有个home页面,然后有一对兄弟组件SonOne和SonTwo
home里引入SonOne和SonTwo
<template>
<div>
<SonOne />
<SonTwo />
</div>
</template>
<script>
import SonOne from "@/components/Sonone.vue"
import SonTwo from "@/components/Sontwo.vue"
export default {
components:{
SonOne, SonTwo
}
}
</script>
①在src下创建一个eventBus文件夹(就是容纳中央事件总线的文件夹)
index.js里写
// 容纳中央事件总线
import Vue from "vue"
export default new Vue
②在要传递的组件之上抛出
在sonone.vue里
<template>
<div>
Sonone
<!-- 1.需要通过事件来触发 -->
<button @click="fun()">点我传值给Sontwo</button>
</div>
</template>
<script>
// 2.引用中央事件总线
import Eventbus from "@/eventbus"
export default {
methods:{
fun(){
// 3.开始使用中央事件总线来传出数据
// 在中央事件总线的这个空vue实例之上绑定了一个自定义事件
Eventbus.$emit("tian","我是sonone的数据么么哒!!")
}
}
}
</script>
③在接收的组件中接收(sontwo.vue中接收)
<template>
<div>
SonTwo
</div>
</template>
<script>
// 1.引用中央事件总线
import Eventbus from "@/eventbus"
export default {
mounted(){
// 2.使用中央事件总线来监听接收数据
// $on() 监听实例上的自定义事件
//语法: Eventbus.$on("你要监听的事件名",(自定义事件上的数据)=>{})
Eventbus.$on("tian",(val)=>{
console.log(val)
})
}
}
</script>
组件传值小练习
https://blog.csdn.net/Tianxiaoxixi/article/details/125668397?spm=1001.2014.3001.5502