Vue中非父子组件传值的方式

最新推荐文章于 2023-02-16 16:26:54 发布

Mr.Starl

最新推荐文章于 2023-02-16 16:26:54 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签：非父子组件传值 Vue

本文链接：https://blog.youkuaiyun.com/f120032777/article/details/84860843

Vue 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍如何使用Vue创建全局事件总线，实现组件间的数据传递。通过三步操作：创建公共js文件、广播数据、接收数据，轻松完成组件间的通信。

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

只需三个步骤：

1.创建一个公共的js文件（如vueEvent.js），引入并实例化Vue，然后暴露这个实例。

//创建vueEvent.js
import Vue from 'vue'

var vueEvent = new Vue();

export default vueEvent

并在参与传值和接收值的组件中，引入vueEvent

2.在传值的组件中，通过vueEvent.$emit('名称','数据')进行广播

<template>
    <div id="home">
		<h1>我是Home组件</h1>
	    <button @click="emitNews()">给NEWS组件广播数据</button>
    </div>
</template>

<script>
  import vueEvent from '../model/vueEvent.js';	
	
  export default{
  	data(){
  		return {
  			msg: '我是要传给News组件的值'
  		}
  	},
  	methods:{
  		emitNews(){
  		   //广播数据
  		   vueEvent.$emit('to-news', this.msg);
  		}
  	}
  }
</script>

3.在接收值的组件中，通过vueEvent.$on('名称',function ( ){ })接收广播的数据

<template>
	<div id="news">
		<h3>我是News组件</h3>
	</div>
</template>

<script>
  import vueEvent from '../model/vueEvent.js';
	
  export default{
  	data(){
  		return {
  			msg: '',
  		}
  	},
  	mounted(){
                //接收数据
		vueEvent.$on('to-news', function(data){
			console.log(data);
		})
	}
  }
</script>

最后News组件成功打印出Home组件中的msg: