首页 > 其他 > 详细

兄弟组件

时间:2021-09-01 19:32:56      阅读:26      评论:0      收藏:0      [点我收藏+]

1.新建一个eventBus.js

import Vue from ‘vue‘
export default new Vue()

2.brother1.vue(发送方)

import引入bus

import bus from ‘./eventBus‘

自定义一个emit事件

 bus.$emit(‘share‘,this.msg);
<template>
   <div>
       <button @click="sendMessage">发送消息</button>
   </div>
</template>
<script>
import bus from ‘./eventBus‘
export default {
  data() {
     return {
         msg:‘cfy的message‘,
    }
  },
methods:{
   sendMessage(){
       bus.$emit(‘share‘,this.msg);
  }
}
}
</script>
<style>
</style>
?

3.brother2.vue(接收方)

import引入bus

import bus from ‘./eventBus‘

接收这个emit事件

<template>
  <div>
    {{msgFromLeft}}
  </div>
</template>
<script>
import bus from ‘./eventBus‘
export default {
  data() {
    return {
        msgFromLeft:‘‘
    }
  },
created(){
  bus.$on(‘share‘,val=>{
      this.msgFromLeft = val
  })
},
?
?

 

兄弟组件

原文:https://www.cnblogs.com/ajaXJson/p/15207312.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!