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父子组件传值与普通的组件一样，只是让人迷惑，认为这是路由组件可能会有所不同。
所以碰到拿捏不定，可以大胆的去尝试~
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue.config.js中configureWebpack与chainWebpack区别及说明
这篇文章主要介绍了vue.config.js中configureWebpack与chainWebpack区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇博客针对axios库的核心代码做一个简要总结，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了Vue实现boradcast和dispatch的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-11-11
vue 插值 v-once,v-text, v-html详解
这篇文章主要介绍了vue 插值 v-once,v-text, v-html详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
路由懒加载是一项关键技术,它可以帮助我们提高Web应用的加载速度,本文主要介绍了React和Vue实现路由懒加载的示例代码,具有一定的参考价值,感兴趣的可以了解一下2024-01-01
本文主要介绍了Vue和SpringBoot之间传递时间的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
聊天工具的项目开发到了表情功能,由于目前会话的输入区域使用的是 textarea 而非富文本编辑器,所以表情功能也需要兼顾 textarea 进行开发,本文给大家简单聊聊几种表情的实现方,感兴趣的小伙伴一起来看看吧2025-01-01
这篇文章主要介绍了vue.config.js常用配置详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
vue中axios给后端传递参数出现等于号和双引号的问题及解决方法
这篇文章主要介绍了vue中axios给后端传递参数出现等于号和双引号要怎么解决,项目场景我是传递一个string字符给后端时候报错，随手把这个问题记录下来了，需要的朋友可以参考下解决方案2022-11-11
在 Vue 3 中,v-bind 指令用于将表达式的值绑定到 DOM 元素的属性上,这个指令的语法与 Vue 2 相同,但有一些细微的变化和改进,这篇文章主要介绍了Vue3 v-bind 指令的基本用法,需要的朋友可以参考下2024-08-08
最新评论