vue 组件间的通信演示

emit props

子组件

<template>
  <div style="background-color:blue;width:70%;height:100px">
   {{name}}————————{{b_mess.height}}—————{{b_mess.hair}}
   <br>
{{fc}}
   <br>
  </div>
</template>

<script>
export default {
data(){
  return{
    name:"我是B组件",
    b_mess:{height:185,hair:'short'},
  }
 
},
props:{
  fc:Object
},
created(){
       this.$emit("re_cf",this.b_mess)
},
 methods:{

  }
}
</script>

<style>

</style>

父组件

<template>
  <div style="background-color:pink;width:70%;height:200px">
   {{name}}————————{{a_mess.height}}—————{{a_mess.hair}}
   <button @click="cf">发送数据</button>
   {{reb_message}}
   <br/>
   <br/>
   <br/>
    <B @re_cf="re_cf" :fc="a_mess"></B>
  </div>
</template>

<script>
import B from"./B.vue"
export default {
data(){
  return{
     name:"我是A组件",
    a_mess:{height:167,hair:'long'},
    reb_message:{}
  }
},
components:{
    B
},
methods:{
 re_cf(e){
    this.reb_message=e
 }
}
}
</script>

<style>

</style>

$ref $children $parent

vue3把 $children取消掉了不然在父组件log输出 $children就是一个数组，里面是他的子组件
$parents

<template>
  <div style="background-color:blue;width:70%;height:100px">
   {{name}}————————{{b_mess.height}}—————{{b_mess.hair}}
   <br>
   {{rea_mess}}
   <br>
  </div>
</template>

<script>
export default {
data(){
  return{
    name:"我是B组件",
    b_mess:{height:185,hair:'short'},
    rea_mess:{}
  }
 
},
props:{
},
created(){
    this.rea_mess=this.$parent.a_mess
    console.log(this.$parent.a_mess);
},
 methods:{

  }
}
</script>

<style>

</style>

$ref

<template>
  <div style="background-color:pink;width:70%;height:200px">
   {{name}}——————{{a_mess.height}}—————{{a_mess.hair}}
   <br/>
   <br/>
   <br/>
    <B ref="B"></B>
   <button @click="cf">发送数据</button>
  </div>
</template>

<script>
import B from"./B.vue"
export default {
data(){
  return{
     name:"我是A组件",
    a_mess:{height:167,hair:'long'},
  }
},

components:{
    B
},
created(){
  
},
methods:{
  cf(){
    console.log(this.$refs.B.b_mess);
    console.log(this.$children);
  }
}
}
</script>

<style>

</style>

EventBus $emit $on $off 事件总线

因为Vue3不再提供$on与emit函数，
首先需要下载mitt
vue2的事件总线
main.js

$emit $on $off

vue3中想要使用事件总线需要下载一个插件 mitt

npm install --save mitt或者yarn add mitt -S

app.config.globalProperties.$bus = new mitt()

$emit $on $off

emit是mitt上面的事件所以不用加 $

$attrs $listeners

vue3取消了$listeners

详情见 https://v3.vuejs.org/guide/migration/listeners-removed.html

provide inject

这样就可以获取父组件的this eltext就是父组件的this

vuex

见vue官网https://vuex.vuejs.org/zh/guide/