vue数据传输排坑

最新推荐文章于 2024-06-30 10:42:02 发布
最新推荐文章于 2024-06-30 10:42:02 发布
阅读量355 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TyrionJ/article/details/78719976
版权

在项目开发中忽略了一个问题，导致数据不能传输报错。
报错

App.vue
App.vue

商品goods组件要传递需要的数据给购物车shopcart组件

这里写图片描述

shopcart组件也定义了props来接受父组件goods传来的数据

这里写图片描述
为什么会报错呢，shopcart组件尽管定义了props来接受父组件的seller相关数据，goods组件也绑定了相关的seller相关的price数据但是这里忽略了重要的一点，goods组件是无法获得seller数据的，尽管他也定义了props来接受seller
这里写图片描述

要解决这个问题，只需要在在父组件app.vue中传递seller给goods组件，具体做法见下图改后
只需要在app.vue中传递seller

这里写图片描述

可以看到能正确获取到想要的数据
这里写图片描述

总结一句话：父组件传递，子组件接受一个都不能少，否则就会出啊先错误。

TyrionJ
关注
专栏目录
vue传递数据的方式
qq_38361229的博客
09-22 825
VUE传递数据的方式
Vue-数据传递
Linjing127218的博客
04-24 839
组件（Component）是Vue.js 最强大的功能。组件可以封装可重用的代码，通过传入对象的不同，实现组件的复用，但组件传值就成为一个需要解决的问题。1.     父组件向子组件传值组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。子组件：子组件需要从父组件获取 logo 的值，就需要使用 props: ...
vue-数据传递
乐夫天命兮的博客
04-18 301
组件（Component）是 Vue.js 最强大的功能。组件可以封装可重用的代码，通过传入对象的不同，实现组件的复用，但组件传值就成为一个需要解决的问题。 父组件向子组件传值 组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。 子组件： 子组件需要从父组件获取 logo 的值，就需要使用 p...
【Vue】——组件之间数据的传递
最新发布
shsjssnn的博客
06-30 1393
(一)掌握vue项目中组件的注册与引用； (二)掌握vue项目中组件之间的数据传递。
Vue数据传递
qq_35381464的博客
11-17 253
vue数据传递 一、Vue数据单向传递 MVVM设计模式 在MVVM设计模式中由3个部分组成 M:Model数据模型(保存数据,处理数据业务逻辑) V:View视图(展示数据,与用户交互) VM:ViewModel数据模型和视图的桥梁(M是中国人,V是美国人,VM就是翻译) MVVM设计模式最大的特点就是支持数据的双向传递 数据可以从M->VM->V 也可以从V->VM->M Vue中M...
vue 数据传递方式汇总
北寻北爱
07-29 661
vue 数据传递及数据获取方式；传参方式、获取数据方式等
前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）
m0_67394006的博客
03-02 9162
文章目录 前言 第一回合 一、知识点：cookie（21/09/06） 二、知识点：节流和防抖（21/09/07） 三、知识点：var和let以及const（21/09/08） 四：知识点：深拷贝和浅拷贝（21/09/09） 五、知识点：作用域和作用域链（21/09/10） 六、知识点：从输入URL到页面展示这中间发生了什么（21/09/11） 七、知识点：重排和重绘（21/09/12） 八、知识点：TCP和UDP（21/09/13） 九、知识点：三次握手（21/09/15） 十、知识点：绝对定位和相对定
前端面试0
Chow_yi的博客
07-15 388
向父组件发送数据父组件传递过来的num自定义事件,让父组件完成对num的运算使用父组件传递过来的函数方式一直接使用
前端面试100问！！
weixin_42623421的博客
06-19 3647
面试造火箭，工作拧螺丝！ 在技术圈毕竟只有百分之一的人能进入BAT，百分之九九的小伙伴只能在普通公司做这普通的事情，厌烦哪些标题党，我们抛开那些高大上的台词，回归到面试的本质。 本课程帮助小伙伴们快速梳理知识，不会涉及到具体的很细节的知识点，关注面试本身。 公司一般会从以下5个方面考察一个人的能力，本课程的100问是总结了最近2-3年常问的面试题，适合初中级前端工程师。 1、HTML(5)和CSS3方面 1.前端与后端数据交互的格式有哪些，为什么大部分现在都用json而不用xml。 答：XML：知了堂3岁
串联高频面试问题，触类旁通，一通百通！
掘金安东尼
07-15 1640
前言 开宗明义，本瓜深知汝之痛点：前端面试知识点太杂，卿总为了面试而面试，忘了记，记了又忘，循环往复，为此叫苦不迭。 来，让本瓜带领各位都稍稍回顾一下，自己曾经在学生时代记忆元素周期表的光辉岁月。 氢、氦、锂、铍、硼、碳、氮、氧、氟、氖、钠、镁、铝、硅、磷、硫、氯、氩、钾、钙、钪、钛、钒、铬、猛、铁、钴、镍、铜、锌… 咱当初记这前三十位元素，是死记硬背的吗？答案是否定的，机智的我们用到了 串联记忆法 。 一定是像这样或类似这样去记： 第一周期：氢 氦 ———— 轻嗨：轻轻的打个了招呼：嗨！ 第二周期：锂
Java复习面试题
weixin_51788883的博客
06-04 797
Java基础 1. 面向对象的三个基本特征? 面向对象的三个基本特征是:封装、继承、多态 继承:让某个类型的对象获得另一个类型的对象的属性的方法;继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例和方法,或子类从父类继承方法,使得子类具有父类相同的行为 封装:隐藏部分对象的属性和实现细节,对数据的访问只能通过对外公开的接口,通过这种方式,对象对内部数据提供了不同级别的保护,以防止程序中无关的部分意外的改变或错误的使用了对象的私有部分 多态:对于同一个行为,不同的子类对象具有不同的表现
Vue数据传输（晓舟报告笔记）
fly_ship的博客
08-09 138
看一下结构 后台 serve.js没啥用处，就是写了一个fruitList模拟数据库，然后提供三个方法get、post、delete const Koa = require("koa"); const parser = require("koa-parser"); //获取post请求数据 const router = require("koa-router")(); //设置路由 const cors = require('koa2-cors'); //允许跨域 const app = new Koa(
vue简单的数据传输
m0_53394907的博客
01-04 767
vue的组件数据之间的传输，props(包括用函数方式子传父),自定义事件，全局总线，消息订阅与发布，vuex（模块化和与后端简单的交互）
vue 数据传递
w_jiunian的博客
04-17 558
声明渲染目标（容器）var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }， methods:{ .... } })递归组件Vue.component('unique-name-of-my-component', { props：[' '],
Vue组件之间的数据传递
z020729的博客
11-06 2004
在自由贸易场，老刘家有个养鸡园，可以产出鸡肉制品，老刘有两个儿子，大刘负责把每天收到的鸡蛋交给老刘，老刘会把孵出来的小鸡仔交给小刘好生照顾；老赵家有个蔬菜园，由于大环境导致行业不景气，老赵已经好长时间没吃肉了，他晃晃脑袋，眼睛一转，拿些菠菜送给老刘，过来几天，老刘拿着鸡肉登门拜访，老赵如愿以偿，对了，小刘正长个子呢，大刘也特别爱吃菠菜。
vue数据传递方式
zhizhenjin的博客
10-18 373
父子组件数据传递 在子组件中的props选项，定义属性propComponent，用于父向子传递数据 子向父传递数据，通过事件传递的方式实现，在子组件中通过this.$emit(‘eventEmit’,'1')触发相应的事件，在父组件中监听eventEmit事件，并在参数中获取子向父传递过来的数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
VUE传递数据的方式
and_life的博客
05-23 579
message的值为{{msg}}
flask框架+vue数据传输
09-26
flask框架和Vue之间的数据传输可以通过以下步骤完成。首先，通过在Flask应用程序中定义一个路由来接收Vue发送的数据。路由代码类似于`@app.route('/login', methods=['POST', 'GET'])`。在这个路由中，您可以使用`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值