Vue传值方式-兄弟之间传值

最新推荐文章于 2024-03-31 12:50:39 发布

我是一只女猴子

最新推荐文章于 2024-03-31 12:50:39 发布

阅读量110

点赞数

分类专栏： Vue学习要点文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_38647157/article/details/129158244

版权

Vue学习要点专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章介绍了在Vue.js应用中，如何通过创建一个eventBus.js文件来实现兄弟组件之间的数据传递。发送方组件使用bus.$emit触发事件并传递值，而接收方组件在created生命周期钩子中通过bus.$on监听并接收数据。

摘要由CSDN通过智能技术生成

兄弟组件传值

新增一个eventBus.js文件

import Vue from 'vue'

export default new Vue()

传值方------利用bus.$emit将值进行传递

<template>
  <div>
    <button @click="send">发送诗歌</button>
  </div>
</template>
<script>
  import bus from '@/eventBus.js'
  export default{
    props:["msg",'user'],
    data(){
      return {
        str:"床前明月光 疑是地上霜"
      }
    },
    methods:{
      send(){
        bus.$emit('share',this.str)
      }
    }
  }
</script>

接收方-------通过周期函数created，再利用bus.$on接收数据

<template>
  <div>
    诗歌{{ messagefromleft }}
  </div>
</template>
<script>
  import bus from '@/eventBus.js'

  export default{
    data(){
      return {
        messagefromleft:''
      }
    },
    created(){
      bus.$on('share',(val)=>{
        this.messagefromleft = val
      })
    },
  }
</script>