Vue.js框架--非父子组件传值（十五）

主要操作技能：

  Home.vue / News.vue 不是父子关系
     * 非父子组件传值
     *   1.新建一个js文件,然后引入vue, 实例化vue, 最后暴露给这个实例==>  VueEvent.js
     *  
     *   2.在要广播的地方引入实例     import VueEvent from '../model/VueEvent.js'
     * 
     *   3.通过VueEvent.$emit(名称，数据)    VueEvent.$emit('to-news', this.msg);
     * 
     *   4.在接受数据上通过$on接受广播数据
     *   
     *    mounted() { 
            //监听news广播数据
            VueEvent.$on('to-news', function(data) {
                console.log(data);
            })
         }

 

编写代码：

VueEvent.js

import Vue from 'vue'

var VueEvent=new Vue()

export default VueEvent;

 

Home.vue

<template>
	<!--所以的内容多要被根节点包含起来 -->
	<div id="home">
		<h3>首页组件</h3><br />
		<button @click="emitNews()">给新闻主播数据</button>
	</div>
</template>

<script>
	//引入Vue实例
	import VueEvent from '../model/VueEvent.js'
	export default {
		data() { //数据
			return {
				msg: 'I am home component!'
			}
		},
		methods: {
			//广播数据
			emitNews() {
				//子组件可以使用 $emit 触发父组件的自定义事件。
				//vm.$emit( event, arg ) //触发当前实例上的事件
				VueEvent.$emit('to-news', this.msg);
			}
		},
		mounted() { //生命周期函数
			//监听news广播数据
			VueEvent.$on('to-home', function(data) {
				console.log(data);
			})
		}

	}
</script>

News.vue

<template>
	<div id="news">
		<h2>我是新闻组件</h2><br />
		<button @click="emitHome">给首页广播数据</button>
	</div>
</template>

<script>
	//引入vue实例
	import VueEvent from '../model/VueEvent.js'
	export default {
		data() {
			return {
				msg: '我是新闻组件哦!'
			}
		},
		methods: {
			//广播数据
			emitHome() {
				VueEvent.$emit('to-home', this.msg);
			}
		},
		mounted() {
			//监听home广播数据
			//vm.$on( event, fn );//监听event事件后运行 fn； 	
			VueEvent.$on('to-news', function(data) {
				console.log(data);
			})
		}

	}
</script>

<style>

</style>

 

效果：

将首页组件”的数据传给“新闻组件”

将新闻组件”的数据传给“首页组件”