心血来潮，总结下 vue 组件传值方法

# props

	//parent 组件
	<child :msg="msg"></child>

	//child 组件
	props:{
	msg:{
	type:"String",
	defualt:"这是从父节点传过来的值"
	}
	}

# $emit / $on

	//parent 组件
	<child @handleClick="handleClick"></child>
	methods:
	handleClick(){
	// 执行操作
	}

	//child 组件
	<div @click="handleClick"></div>
	methods:
	handleClick(){
	this.$emit("handleClick")
	}

# event Bus 可以实现同级组件之间的传值

	//main.js
	Vue.prototype.$bus = new Bus();

	// child1
	this.$bus.$on('foo', handle)

	// child2
	this.$bus.$emit('foo')

# $parent 兄弟组件之间通信可通过共同祖辈搭桥，$ parent 或 $root

	// brother1
	this.$parent.$on('foo', handle)


	// brother2
	this.$parent.$emit('foo')

# $children

	// parent
	this.$children[0].xx = 'xxx'

# $refs 获取子节点引用

	// parent
	<HelloWorld ref="hw"/>
	mounted() {
	this.$refs.hw.xx = 'xxx'
	}

# provide/inject 能够实现祖先和后代之间传值

	// ancestor
	provide() {
	return {foo: 'foo'}
	}
	// descendant
	inject: ['foo']

# $attrs

	//child：并未在 props 中声明 foo
	<p><!--swig0--></p>

	// parent
	<HelloWorld foo="foo"/>

# 路由传参

步骤：

定义路由时加上参数 props: true ，在定义路由路径时要留有参数占位符: name『用法: to="'路径/'＋value" 』
在跳转到的页面加上参数 props:['name']
在跳转到的页面就获取到了 name『用法: js 中直接 this. name ；html 中直接插值 {{ name}} 』

# vuex

最常用的方式，特别是大系统，layout、权限、菜单、登录、用户信息等模块应用广泛，这种方式就不多说了，可以自己查阅文档

# 组件中定义单独的 store

参考另一篇文章创建小型仓库 store 类似于 vuex