心血来潮，总结下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>{{$attrs.foo}}</p>

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

路由传参

步骤：

1. 定义路由时加上参数props: true，在定义路由路径时要留有参数占位符: name『用法:to="'路径/'＋value"』

2. 在跳转到的页面加上参数props:['name']

3. 在跳转到的页面就获取到了name『用法: js中直接this. name；html中直接插值{{ name}}』

vuex

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

组件中定义单独的store

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