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 Router组件内路由钩子的使用,用于权限验证、数据预加载、防止数据丢失等场景,具有一定的参考价值,感兴趣的可以了解一下2025-06-06
这篇文章主要为大家介绍了vue为什么v-for的优先级比v-if高原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
Vue3中defineEmits、defineProps 不用引入便直接用
这篇文章主要介绍了Vue3中defineEmits、defineProps 不用引入便直接用，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
这篇文章主要介绍了vue 循环动态设置ref并获取$refs方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
Vue 组件（component）教程之实现精美的日历方法示例
组件是我们学习vue必须会的一部分，下面这篇文章主要给大家介绍了关于Vue 组件（component）教程之实现精美的日历的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-01-01
这篇文章给大家详细分析了关于VUE的常用的相关指令内容，对此有需要的朋友们可以学习下。2018-08-08
这篇文章主要介绍了Vue Mint UI mt-swipe的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了Vue3组件库框架搭建example环境的详细教程,本文便搭建 example 开发环境和打包构建，并在example中使用组件库，需要的朋友可以参考下2022-11-11
Element-UI日期选择器(选择日期范围)禁用未来日期实现代码
我们在网页开发时通常需要用到一些日期组件来方便用户选择时间,其中element日期组件是一个非常好用的工具,这篇文章主要给大家介绍了关于Element-UI日期选择器(选择日期范围)禁用未来日期的相关资料,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了Element PageHeader页头的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
最新评论