vue中父组件向子组件传值，利用计算属性,传入的值只能是数值

最新推荐文章于 2023-06-18 14:59:41 发布
最新推荐文章于 2023-06-18 14:59:41 发布
阅读量2.3k 收藏 4
点赞数 2
文章标签： vue js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41482648/article/details/119667071
版权

一、问题出现的背景

业务中会经常遇到两种需要改变prop的情况

  • 一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件data内，再声明一个数据，引用父组件的prop。
  • 另一种情况就是prop作为需要被转变的原始值穿入。这种情况可以利用计算机属性。

二、问题出现的情况

我这次遇见的问题是在第二种情况下，来我们一起看看当时的情况（如下图所示）：
在这里插入图片描述
当时我通过prop传入了一个color,color的值是red,然后就发生了下面的事故（如下图所示），然后就开始了面向百度编程，后来还是没有找到类似的案件，后来既然red ,不行那就试试16进制的颜色，结果还是不行。后来我就把16进制的转成10进制的，哎这次貌似可以了（激动的心，颤抖的手），后来随便输入几个数字也都可以传进来，就是非数字的就会出现下面的错误。
在这里插入图片描述
点开前端页面，发现输入的数字都被转换成rgb的形式了，如下图所示：
在这里插入图片描述
试了几个16进制转成10进制的颜色，实际上是有问题的，不知到vue内部是怎么转换成rgb的格式的，所以你输入的颜色和你得到的结果是不相符的。

三、解决的办法

对于这个问题的解决办法，我的思路是这样的，既然非数字类型的数据传不进来，那我们就先给传数值型的数据，等接收到之后，再转为16进制的，这个时候渲染的时候转成的rgb格式才是正确的。（上代码）

<!DOCTYPE html>

<head>
    <meta charset="
最低0.47元/天 解锁文章
爱吹风的猫
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue学习之路（九）：组件——父组件向子组件传值props属性
qq_44860114的博客
11-25 666
vue组件——父组件向子组件传值 问题： 希望在子组件中调用父组件中的数据，但是默认情况下子组件不能访问父组件data中的数据和methods中的方法。 解决方法： 在父组件控制区域内通过标签的形式引入子组件，在引入子组件的同时将需要传递给子组件的数据以属性绑定v-bind的形式传递给子组件。 在子组件的结构内部直接调用绑定的属性，该属性中的数据就是父组件传递给子组件的数据。 子组件调用父组件传递的数据，需要先在子组件的props属性中定义绑定的属性。 <div id="app"&g
vue父组件向子组件动态传值的两种方法
08-28
Vue 父组件向子组件动态传值的两种方法 在 Vue 中，父组件向子组件传值是非常常见的场景。在本文中，我们将介绍两种方法来实现父组件向子组件动态传值。 方法一：使用 Props 传值 在 Vue 中，我们可以使用 props ...
vue 父组件在获取数据之后向子组件传值是为data里面的初始值，而不是接口获取的数组
wjm0519的博客
10-30 3095
1.场景：首先在mounted里面执行接口，并获得相应的数据，有父组件传值到子组件 2.问题：子组件的接受到的数据是父组件data里面定义的默认值，而通过接口获取的后台数据 3.父组件 4.子组件 5.打印结果 6.解决办法 在子组件传参的时候加一个判断，当接口成功获取数据之后在传参 ...
Vue父组件向子组件传递一个动态的值，子组件只能获取初始值，不能实时更新的解决方法
weixin_42575028的博客
09-28 5754
Vue父组件向子组件传递一个动态的值，子组件只能获取初始值，不能实时更新的解决方法 解决方法就是用子组件的watch()监听父组件的数据变化； 原来需要在子组件watch(监听)父组件数据的变化。 而watch只能传递基础类型的变量，比如数组 data() { return { shuzu: new Array(11).fill(0) } }, watch: ...
vue中父组件传递动态初始值给子组件时的问题
xuefeng11111的博客
03-28 1107
先贴上报错信息方便他人查找: [Vue warn]: Error in render: “TypeError: Cannot read property ‘0’ of undefined” found in 当我看到这个问题的时候真的是无从下手，这是什么错？虽然报错了但是页面却也正常的渲染出来了，什么鬼？~~~ 后来在网上查了之后才明白，原来是父组件给子组件传递的初始值是异步获取的，也就是...
【Vue】11.解决父组件通过props属性向子组件传入的值被修改以后报错的问题
热门推荐
返璞归真
01-26 1万+
我在做vue项目的时候遇到了这样的一个问题，在这里做一下总结，就是在提交表单的时候会有一个弹框提醒，这个Dialog我把它封装成了一个子组件，这样在父组件的data属性里面就会定义一个Dialog显示还是隐藏的变量，这个变量默认是false，点击按钮的时候这个变量要变成true显示Dialog，完了以后要关闭Dialog按钮，这个变量就要从父组件传入子组件，在子组件里面改变以后再传回父组件，这里我...
vue2.0 子组件改变props值,并向父组件传值的方法
08-27
在 Vue 2.0 中，子组件改变 props 值并向父组件传值是非常常见的需求。props 是 Vue 组件之间通信的重要手段，但是在子组件中修改 props 值时需要注意避免影响父组件的状态。下面我们将讨论如何正确地改变 props 值...
vue 组件间的通信之子组件向父组件传值的方式
10-15
首先，我们了解一个基本概念：父组件通过属性向子组件传递值。在Vue中，父组件可以通过在子组件标签上使用`v-bind`指令（简写为`:`)将数据绑定到子组件的属性。例如，在`<com-b :name="name"></com-b>`中，`name`...
vue-prop父组件向子组件进行传值的方法
08-27
下面小编就为大家分享一篇vue-prop父组件向子组件进行传值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue中父组件向子组件通信的方法
08-30
Vue中父组件向子组件通信的方法 在 Vue 框架中，父组件向子组件通信是一种常见的场景。可以使用 props 将父组件的数据传递给子组件。子组件在接受数据时需要显示声明 props。在本文中，我们将通过一个实例来介绍 ...
子组件改变父组件的值的时候报不能修改只读属性的问题
Byebye_W0rld的博客
08-02 297
子组件改变父组件的值的时候报不能修改只读属性的问题
vue中属性传值的两种方法 父组件——>子组件 子组件——>父组件
weixin_30814223的博客
10-14 54
第一，父组件向子组件传值 利用propshttps://blog.csdn.net/qq_40190624/article/details/80296919 特别注意： vue中传值又分为： 注意传值和传引用的区别：https://blog.csdn.net/qq_40190624/article/details/80297058#commentBox ...
vue子组件通过获取父组件的值使用计算属性存储值改变
True_cl的博客
07-12 1833
当我们父组件传来的值 props: { data: { type: Object, default: () => {}, }, }, 如果我们在子组件里面去用这个值去显示是完全没问题的,但是如果我们在子组件里面去修改这个值,控制台就会发出报错警告,但是如何在子组件完全拿到这个值呢 computed: { viewsData: { get() { return this.data }, set(da
vue基础--全选，使用计算属性，every，父传子、子传父
最新发布
weixin_44475738的博客
06-18 133
子传父。
vue父组件调用子组件中的属性和方法
公众号-测试生财
11-13 688
接上篇，vue的父组件向子组件获取值，如果父组件需要主动调用子组件中的属性方法该如何实现？ 获取方法 1、 父组件中使用子组件的时候在给子组件定义一个ref属性 2、父组件可以通过this.$refs.XXX，来操作子组件中的属性和方法 子组件Sub1.vue <template> <module :title="title" /> <button :click="run()"></button> </te.
vue3，向组件传参并进行计算
menghuannvxia的专栏
08-02 242
vue3，向组件传参并进行计算。
Vue子组件修改父组件传递的props值属性
weixin_45032627的博客
06-18 1987
需求：父组件通过props传递给子组件 caseList 数组，这里需要遍历该数组来展示每个 case 元素的一些属性，其中就包括创建时间 create_time。但父组件传过来的 create_time 是一个时间戳，我们希望时间以年-月-日的形式来呈现。所以子组件需要想办法修改 props 值的一个属性。 一、使用计算属性 在 computed 中获取到 props，并通过 map 遍历数组来修改属性。 // 子组件 <template> <ul> <li
vue父组件调用子组件属性，父组件往子组件传递参数，子组件传参并触发父组件方法
weixin_38860401的博客
06-17 2211
<template> <div> <button @click="getParams">子组件属性</button> <com1 ref="child" @parentNotic="parentNotic" :parenParamsTest="parenParams"></com1> </div> </template> <script> expor.
vue3.0——watch(监听属性)、computed(计算属性)和父传子通信
隔壁家的小屁孩
02-26 623
<template> <div class="hello"> <span>{{ msg }}</span> <div></div> <span>{{ num }}</span> <button @click="add">+</button> <span>{{ plusOne }}</span> </div>
vue中父组件向其它子组件传值的方法
06-09
Vue中父组件向子组件传值的方法有多种，以下列举两种比较常见的方式： 1. Props：父组件通过props将数据传给子组件，在子组件中通过props接收父组件传递的数据。具体实现方式可以参考Vue官方文档。 2. $emit：子...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值