浅析vue中的组件传值

<template>
<div>
<!-- 2.直接向变量一样进行使用 -->
zizizizzizizizizizi---{{title}}
</div>
</template>
<script>
export default {
// 1.定义了接收参数
props:["title"]
}
</script>
<style>
</style>

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

<template>
<div>
<!-- 2.直接向变量一样进行使用 -->
zizizizzizizizizizi---{{title+6}}
</div>
</template>
<script>
export default {
// 1.定义了接收参数
// props:["title"]
// props验证
props:{
title:Number
}
}
</script>
<style>
</style>

props:{
title:[Number,String]
}

// 默认值
props:{
title:{
// 类型
type:String,
// 默认值
default:"我是默认值"
}
}

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

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

// 1,创建中央事件总线
import Vue from "vue"
export default new Vue

methods: {
fun(){
eventBus.$emit("apao",this.ziatext)
}
}

<script>
// 1,引用中央事件总线
import eventBus from "@/eventBus"
export default {
 // 2,通过生命周期的钩子函数来调用$on进行实力上自定义事件的监听
mounted(){
eventBus.$on("apao",(val)=>{
console.log(val);
})
}
}
</script>