这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战

父传子-prop

详见官方说明

cn.vuejs.org/v2/guide/co…

注意：

为了html的规范，在使用props传值的时候，在父组件引用时变量不用驼峰命名用-连接。参考vue啊element的组件都是-连接的。

对应代码如下：

// 子组件
props: ['whichData'],
// 父组件 建议规范化使用
<my-icon which-data="device"></my-icon>
// 或 父组件引用时直接驼峰命名 其实也可以
<my-icon whichData="device"></my-icon>

子传父-emit

注意：

this.$emit()是子组件往父组件传值，使用该方法无法拿到返回值。

如果子组件需要拿到父组件处理完成后的返回值，则应该使用props。

路由传值router-view

<router-view>其实也是组件，是一个特殊的组件，所以拥有组件的属性和方法，虽然官方并没有举例说明。

// 通过:传值；
// 通过@子通知父调用函数；
// 通过ref打锚点方便父调用子组件。
<router-view :rawData="rawData" @whichMonitor="currentMonitor" ref="monitorChild"/>

小结

父子间传值可以三选一

1、porp+emit

2、统一使用全局变量。

关键在于，传值是否是双向的，是否经常变动，是的话，建议使用全局变量，然后父子都去修改监控。

3、使用内存变量。

关键在于，变量是否刷新重载，只有存在window对象中localStorage、sessionStorage的变量，才不会受到页面刷新的影响。

但需要注意不使用或者退出系统时手动清除，避免一些麻烦。

注意：

若父子需要监控的全局变量是个数组，建议额外增加一个布尔标识量，监控布尔值变化时获取数组的值。

因为直接监控数组变化经常会监控不到。