vue非父子组件(兄弟组件)传值

最新推荐文章于 2022-06-18 11:14:45 发布

原创最新推荐文章于 2022-06-18 11:14:45 发布 · 850 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #组件传值

vue 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何在Vue中实现非父子组件（兄弟组件）之间的值传递。首先创建了一个父组件Home，包含两个子组件News和FriendsList。然后通过一个公共js文件vueEvent.js来辅助实现通信。在FriendsList组件中触发事件并传递值，而News组件则通过methods中的监听器接收并显示传递的值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue非父子组件传值

有点类似于vuex，vuex也可以实现非父子组件传值，这里就不说vuex了，下面是不用vuex的非父子组件传值:

1.新建一个父组件Home.vue,再建两个子组件News.vue和FriendsList.vue;这样News和FriendsList就是我们的非父子组件(兄弟组件)啦；(此处省略Home组件引入这两个子组件的方法)

2.新建一个vueEvent.js做为公共js；

import Vue from 'vue';//引入vue
var VueEvent = new Vue();//实例化
export default VueEvent;//暴露出去

3.FriendsList.vue传值给=>News.vue:
在FriendsList.vue组件中

<button type="button" @click="emit()">传值</button>  <!--这行放到template标签内-->

//下面的放到<script></script>里
import VueEvent from '../vuex/vueEvent.js';
  export default{
    data(){
      return{
        msg:"FriendsList组件信息"
      }
    },
    methods:{
      emit(){
          VueEvent.$emit('to-news',this.msg)//第一个参数是公共名称(在需要接收参数的组件中监听公共名变化就可以拿到传值啦)，第二个参数是要传的值
      },
  }

4.接收值：
在News.vue中

import VueEvent from '../vuex/vueEvent.js';

在method方法中监听公共名to-news

mounted(){
        VueEvent.$on('to-news',function(data){
          console.log(data);
        });
      }

5.点击传值按钮就可以在控制台看到News.vue输出了要传的值啦
在这里插入图片描述