vue 父子页面传值 非父子页面传值

父子页面传值:

parent01.vue:

<template>
	<div>
		<div>父01</div>
		<button @click="getAll()">主动获取不需要传值</button>
		<button @click="send()">发消息到01</button>
		<hr />
		<v-children ref='ch' :pname='pname' :parentFun='parentFun' :that='this'></v-children>
	</div>
</template>

<script>
	
	/**
	 * 父组件主动获取子组件的数据/方法
	 * 1.子组件上加
	 * 	ref='xx'
	 * 2.获取
	 * 	this.$refs.xx.数据/方法
	 */
	
	
	import children from './children01.vue';
	
	import VueEvent from '../modules/VueEvent.js';
	
	export default {
		data() {
			return {
				pname: 'parent01',
				msg : 'this 01'
			}
			
		},
		methods: {
			parentFun() {
				alert('parent01');
			},
			getAll() {
				console.log(this.$refs.ch.chidren);
				this.$refs.ch.chidrenFun();
			},
			send() {
				VueEvent.$emit('to-02',this.msg);
			}
		},
		components: {
			'v-children' : children
		},
		mounted() {
			VueEvent.$on('to-01',function(data){
                console.log(data);
           });
		}
		
	}
</script>

<style>
</style>

children01.vue:

<template>
	<div>
		<div>子</div>
		<div>{{pname}}</div><br />
		<button @click="parentFun()">父方法</button><br />
		<button @click="getParent">获取整个父子组件</button>
		<button @click="getAll()">主动获取不需要传值</button>
	</div>
</template>

<script>
	/**
	 * 获取父组件的数据 方法 整个父组件
	 * 一 : 传值方式
	 * 	父组件设置要传的:
	 * 		<v-children :pname='pname' :parentFun='parentFun' :that='this'></v-children>
	 * 	子组件获取:
	 * 		props:['pname', 'parentFun', 'that']
	 * 
	 * 二 : 主动获取
	 * 	this.$parent.数据/方法
	 * 
	 * 
	 */
	
	export default {
		data() {
			return {
				chidren : 'chidren01'
			}
		},
		props:['pname', 'parentFun', 'that'],
		methods: {
			getParent() {
				console.log(this.that);
			},
			chidrenFun() {
				alert("chidren01");
			},
			getAll() {
				console.log(this.$parent.pname);
				this.$parent.parentFun();
			}
		}
	}
</script>

<style>
</style>

非父子页面传值:

parent02.vue:

<template>
	<div>
		<hr />
		<div>父02</div>
		<button @click="send()">发消息到01</button>
		
	</div>
</template>

<script>
	/**
	 * 同级相互传
	 * 
	 * 新实例化一个Vue
	 * 	看:VueEvent.js
	 * 
	 * 发送消息
	 * 	VueEvent.$emit('接收名',数据);
	 * 
	 * 获取消息
	 * 	VueEvent.$on('发送名',数据 => {})
	 */
	
	
	import VueEvent from '../modules/VueEvent.js';
	
	export default {
		data() {
			return {
				msg : 'this 02'
			}
		},
		methods: {
			send() {
				VueEvent.$emit('to-01',this.msg);
			}
		},
		mounted() {
			VueEvent.$on('to-02',data => {
                console.log(data);
           });
		}
	}
</script>

<style>
</style>

VueEvent.js:

import Vue from 'vue';

var VueEvent = new Vue()
//对外暴露 
export default VueEvent;

源码:https://github.com/dream-broken/vuedemo/blob/master/src/view