vue中的router-view父子组件传参方式

 更新时间:2024年01月03日 10:28:06   作者:轻叹年华逝,  
这篇文章主要介绍了vue中的router-view父子组件传参方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

一、父组件传值给子组件

父组件传递

<router-view  :projectId="projectId"></router-view>

在data里存储的参数

data(){
	return {
		projectId:'xxxxxxxx'
	}
}

子组件接收

export default {
	props:['projectId'],
	watch: {
	      projectId: function (val) {       
	       		console.log(val);   // 接收父组件的值
	      }
    },
}

二、子组件往父组件传值

子组件传值

this.$emit('updateProjectId','xxxxxx')

父组件接收

<router-view class="systemContent" @updateProjectId="updateProjectIdParent"></router-view>

注意:

子组件发送的updateProjectId方法要与父组件绑定的updateProjectId方法同名

updateProjectIdParent(msg){
    this.selectArr.push(msg)
},

这样一个简单的router-view父子传值就完成了,其实router-view父子组件传值与普通的组件一样,只是让人迷惑,认为这是路由组件可能会有所不同。

所以碰到拿捏不定,可以大胆的去尝试~

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • element如何初始化组件功能详解

    element如何初始化组件功能详解

    Element UI是一套基于Vue的桌面端组件库,封装好了很多常用的UI组件,下面这篇文章主要给大家介绍了关于element如何初始化组件功能的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • Springboot运用vue+echarts前后端交互实现动态圆环图

    Springboot运用vue+echarts前后端交互实现动态圆环图

    我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能。我将带大家来实现动态饼图的实现,感兴趣的可以了解一下
    2021-06-06
  • 解决Vue中 父子传值 数据丢失问题

    解决Vue中 父子传值 数据丢失问题

    这篇文章主要介绍了解决Vue中 父子传值 数据丢失问题,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • vue打印功能实现的两种方法总结

    vue打印功能实现的两种方法总结

    在项目中,有时需要打印页面的表格,所以下面这篇文章主要给大家介绍了关于vue打印功能实现的两种方法,以及批量打印的完整代码,需要的朋友可以参考下
    2021-06-06
  • 浅谈VUE uni-app 生命周期

    浅谈VUE uni-app 生命周期

    这篇文章主要介绍了uni-app 的生命周期,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题

    vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题

    这篇文章主要介绍了vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue项目用后端返回的文件流实现docx和pdf文件预览

    vue项目用后端返回的文件流实现docx和pdf文件预览

    本文主要介绍了vue项目用后端返回的文件流实现docx和pdf文件预览,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 使用vue for时为什么要key【推荐】

    使用vue for时为什么要key【推荐】

    很多朋友不明白在使用vue for时为什么要key,key的作用有哪些,在文中给大家详细介绍,需要的朋友可以参考下
    2019-07-07
  • 浅谈VUE监听窗口变化事件的问题

    浅谈VUE监听窗口变化事件的问题

    下面小编就为大家分享一篇浅谈VUE监听窗口变化事件的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue实现商品规格选择功能

    vue实现商品规格选择功能

    这篇文章主要为大家详细介绍了vue实现商品规格选择,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论