【Vue】兄弟组件值与方法传递使用

Vue 兄弟组件通信

这里使用的是Bus，$bus 思路是在全局挂载一个实例，通过这个实例里的事件派发和事件监听实现跨组件通信，设计模式叫做观察者模式。

例子

A、B组件通信

页面代码

<template>
  <div>
    <!--组件A-->
    <a-compoents></a-compoents>
    <!--组件B-->
    <b-compoents></b-compoents>
  </div>
</template>

<script>
import ACompoents from '@/views/compoents/ACompoents'
import BCompoents from '@/views/compoents/BCompoents'

export default {
  name: 'IndexPage',
  components: {
    ACompoents,
    BCompoents
  },
  methods: {}
}
</script>

<style scoped>

</style>

新建bus.js

// util - bus.js
import Vue from 'vue'
const bus = new Vue()

export default bus

传递属性

调用者

import bus from '@/util/bus'
toBValue () {
      bus.$emit('name', 'halo')
}

接收者

import bus from '@/util/bus'
    mounted () {
    bus.$on('name', (e) => {
      this.name = e
    })
}

效果截图

当A组件传递值给B组件。

传递方法

调用者

import bus from '@/util/bus'

toBMethod () {
   bus.$emit('testMethos')
}

接收者

  mounted () {
    bus.$on('testMethos', this.testMethod)
  },
  methods: {
    testMethod () {
      console.log('调用了B组件')
    }
  }
'```
![在这里插入图片描述](https://img-blog.csdnimg.cn/3e545beacde44fdca7682a28f5508852.png)