组件通信(兄弟组件的传值以及跨组件传值)

兄弟组件传值

vue2中,先实例化一个公共的通信对象 eventBus(什么名字都可以)其中一个组件通过$on监听事件,另外一个兄弟组件通过$emit去触发事件

eventsBus.js 文件

import { createApp } from 'vue'

//实例化通信对象 并导出
export default createApp()

App.vue

由于都是在vue3中写,Vue 3中 没有$emit方法,会报错

适用于vue2

<template>
  <!-- 一个.vue文件就是一个单文件组件(SFC) -->
  <div>
    <ChildA></ChildA>
    <ChildB></ChildB>
  </div>
</template>
<script>
import ChildA from './components/ChildA.vue';
import ChildB from './components/ChildB.vue';

export default {
  components:{
    ChildA,
    ChildB
  }
}
</script>
<style scoped>
</style>

ChildA.vue组件

<template>
  <div>
    childA组件 <button @click="handleClick">传值</button>
  </div>
</template>
<script>
import eventBus from "../utils/eventBus"
export default {
    methods:{
        handleClick(){
            // Vue 3中 没有$emit方法,会报错
            //eventBus.$emit('tranferdata',8888);
        }
    }
}
</script>
<style>
</style>

ChildB.vue组件

<template>
  <div>
    childB组件
  </div>
</template>
<script>
import eventBus from '../utils/eventBus'
export default {
    mounted(){
        //监听事件

        //Vue 3 中 没有$on方法, 会报错
        // eventBus.$on('tranferdata',(data)=>{
        //     console.log('接收到的数据:',data);
        // })
    }
}
</script>
<style>
</style>

跨组件传值

跨组件通信,外层组件通过provide选项传值,内层组件通过inject接受值

最外层 App.vue 用provide传值

export default {
  components:{
    ChildC
  },
  //通过provide选项 传值
  provide:{
    name:"黎明",
    arr:[1,2,3]
  }
}

下一层是ChildC.vue来接收

<template>
  <div>
    childC组件 - {{name}}
    <ChildD></ChildD>
  </div>
</template>

<script>
//引入同级的组件
import ChildD from './ChildD.vue'

export default {
    components:{
        ChildD
    },
    //inject用来接受App.vue 用provide传过来的值
    inject:['name']
}
</script>

<style>

</style>

ChildC的下一层ChildD来接收App.vue传过来的值

<template>
  <div>
    childD组件 - {{arr[0]}} - {{ name }}
  </div>
</template>
<script>
export default {
    //通过inject选项,接收值
    inject:['name','arr']
}
</script>
<style>
</style>