当前位置:   article > 正文

vue的组件间(路由间)父子传值_router-view$emit无效

router-view$emit无效

父传子-prop

详见官方说明
https://cn.vuejs.org/v2/guide/components-props.html
注意:
为了html的规范,在使用props传值的时候,在父组件引用时变量不用驼峰命名用-连接。参考vue啊element的组件都是-连接的。对应代码如下:

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

子传父-emit

注意:
this.$emit()是子组件往父组件传值,使用该方法无法拿到返回值。
如果子组件需要拿到父组件处理完成后的返回值,则应该使用props。

路由传值router-view

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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/132415
推荐阅读
相关标签
  

闽ICP备14008679号