浅谈父子组件传值问题

目录

• 一、问题描述
• 二、问题解决

一、问题描述

想要搭建一个模型检验的页面，在点击按钮“开始检测”后，后端会获取相应数据、页面跳转并进行渲染。

主要涉及三个页面：index.vue、BorderCard.vue、CardResult.vue，如图1：

index.vue想要引入“步骤条”实现两个组件的切换效果，如图2：

index.vue中引入两个组件的部分：

相关部分代码如下：

// BorderCard.vue

// index.vue

// CardResult.vue

然而发生下列错误，如图：

为了避免直接改变prop中的值，因此我考虑继续使用 this.$emit -> index.vue，由于此时组件没有发生切换，因此不会触发组件的重新加载，然后实现赋值

修改后，部分相关代码如下：

// CardResult.vue

运行结果如图，目前能够正常显示：

到此这篇关于浅谈父子组件传值问题的文章就介绍到这了,更多相关父子组件传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！