vue2兄弟组件传值

发布时间 2023-11-27 09:08:06作者: adong搬砖
// 1 创建一个公共的vue实例(bus)

import Vue from 'vue'
const bus = new Vue()
export default bus
<!--  brother1-->
<template>
  <div>
    兄弟1组件
    <p>
      <button @click="send">传值给兄弟2</button>
    </p>
  </div>
</template>

<script>
import bus from './bus'
export default {
  methods: {
    send () {
      bus.$emit('myevent', ['胡歌', '迪丽热巴', '古力娜扎'])
    }
  }
}
</script>

 <!--  brother2-->

<template>
  <div>兄弟2组件</div>
</template>

<script>
import bus from './bus'
export default {
  mounted () {
    bus.$on('myevent', val => {
      console.log('---brother2---', val)
    })
  }
}
</script>