computed能作为组件传值传递吗

最新推荐文章于 2023-03-16 11:49:12 发布
最新推荐文章于 2023-03-16 11:49:12 发布
阅读量1.1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41430522/article/details/115598813
版权

 

 

点击后

 

可以

你想想,你父组件有个computed被一些数据影响着值,然后你computed传给了子组件

那子组件是不是也动态变了,是不是很爽

还有vuex的getters其实就是计算属性

 

看看这篇博客

https://www.jb51.net/article/159727.htm

使用场景,打个比方

若是对数据进行处理输出，比如数据要过滤，一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据，比如饼状图组件和曲线图组件，我们是否可以把这个数据抽提出来共享？这就是getters存在的意义。我们可以认为，【getters】是store的计算属性。

业务场景希望过滤出大于 5 的数。马上想到的方法可能的是：在组件的计算属性中进行过滤：功能虽然实现了，但如果其它组件也需要过滤后的数据，那么就得把 index.vue 中的计算过滤代码复制出来。如果过滤规则发生变化，还得一一修改这些组件中的计算属性，很难维护。这种场景下，我们就可以使用 getters 属性啦O

也就是说比如state中的数据很多页面要用,然后我再getters里面写,这样,我就相当于传了一个computed给这所有页面,懂?,这和我上面说的吧父组件的computed传给子组件的意思一样啊

不过这个vuex这种里面用,

烟雨浥轻尘
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中实现computed属性传值
weixin_51295863的博客
07-15 2114
vue实现computed计算属性的传值效果，computed方法返回函数方法
computed属性计算函数能否传递参数？
summer___cold的博客
09-05 1321
但如果需要传递参数，则计算函数中需要进行return fn(arg...)，而这个返回的函数中可以设置参数内容，最终属性计算的函数调用将会调用到return返回的这个函数内容。compunted中定义属性计算函数，一般如果没有参数传递，可以直接return返回属性计算的结果。高阶函数的概念：函数的参数是函数或函数的返回值是函数，可以称高阶函数。可以，主要利用高阶函数(HOF来实现)。
computed传值（解决vue3不在支持过滤器的问题）
君莫笑
06-03 2118
最近我在使用vue3建立的脚手架中发现过滤器不能使用了。为了解决我项目的日期格式化，因此我复习了computed，了解其如何传值。我也在网上查了很多资料但我觉得都不是很适用，下面是我总结我的方法，以备以后忘记了可以翻翻。如果有错误，希望各位大佬多多指出。 一、computed基本用法 定义: 当其依赖的属性的值发生变化的时，计算属性会重新计算。反之则使用缓存中的属性值, 其设计的目的就是为了解决模板中放入太多的逻辑而导致模板过重且难以维护的问题。 二、computed传值 2.1、利用计算属性的set.
使用computed计算属性进行传参
热门推荐
xlelou的博客
08-07 2万+
需求，根据传递过来的宽高比，进行宽高的重新计算 computed:{ imgWD(o){ return function(o){ return { width:'370px', height:370*(1/o) + 'px' } } } } <div ...
vue 基础之父子组件传值
weixin_48813932的博客
05-17 216
一父组件传子组件 下面这个demo 用的是js引入的方法，父组件绑定动态属性，子组件用props接收对应的值 注意，实际传值过程中，如果要改变props中的值，不能直接处理，一般用computed重新创建一个属性，做相对应的处理， <div id="app"> 父组件 <son v-bind:str="msg"></son> </div> <template id="son">
vue2.0 子组件改变props值,并向父组件传值的方法
08-27
Vue 2.0 子组件改变 props 值并向父组件传值的方法 在 Vue 2.0 中，子组件改变 props 值并向父组件传值是非常常见的需求。props 是 Vue 组件之间通信的重要手段，但是在子组件中修改 props 值时需要注意避免影响父...
vue 组件间的通信之子组件向父组件传值的方式
10-15
Vue.js 是一款流行的前端框架...以上就是Vue中子组件向父组件传值的常见方式。在实际开发中，应根据具体需求选择合适的方法，确保代码的可维护性和可扩展性。了解并熟练掌握这些通信方式对于提高Vue开发效率至关重要。
xr-frame案例实现兄弟组件传值通信
最新发布
01-12
例如，在Vue中，可以创建一个Vue实例作为事件总线，然后在发送组件中触发事件，而在接收组件中监听该事件。 ```javascript // 创建事件总线 const EventBus = new Vue(); // 发送组件 methods: { sendValue(value...
vue父组件通过props如何向子组件传递方法详解
12-10
本文主要给大家介绍了关于vue中父组件通过props向子组件传递方法的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍： vue 组件中的 this vue 中 data/computed/methods 中 this的上下文是vue实例,需...
父组件传值给子组件
qq_41306166的博客
02-01 86
父组件 引用子组件 <child :data1="data1" :data2="data2"></child> 注册 import child from "./child"; components:{ child }, 子组件获取父组件传的值 props:['data1','data2'] 全部代码 父组件 <template> <div> <child :data1="data1" :data2="
父子组件的数据传递2：父组件给子组件传值，props
jianchibuxie0的博客
08-18 257
1、父组件通过属性形式（props）给子组件传数据（单向数据流——子组件不能直接改变父组件传递的值——克隆副本，改副本） 2、子组件通过事件触发给父组件传值 <body> //根组件 <div id="root"> <!--1、父组件给根组件传参:count="3"--> <counter :count="3" @inc="handleIncrease"></counter> //子组件
Vue 父子组件间的传值
gerwerwq的博客
03-16 96
Vue 为组件开发，在软件开发过程中就避免不了父子组件间传值的问题那么如何解决父子组件间传值呢？
解决当子组件在computed中使用父组件传递过来的props值时，第一次有值，第二次报undefined的问题
廖子默
03-03 7338
大概说一下我的业务流程 1.父组件发送了一个对象数据给子组件（鼠标每移动一次就发送一次，即数据是动态不断传送的） 2.这个数据的格式是这样的。 3.然后我们去子组件那里得到这个props值 现在问题就来了 1.我想在computed中使用这个值，然后我就以如下方式使用它（注释部分就是解决问题所在） 2.然后有趣的问题就来了，当我刷新页面的时候，控制台竟然报undefined 后面百度了一...
二次封装element select，通过computed计算属性解决v-model父子组件传递值问题
字节叔叔
09-01 2073
项目中需要编写一个全局组件，继承element select，二次封装element select，不用重复去写封装组件数据的代码。这里面遇到了父子组件传递值不成功的问题，通过computed计算属性解决。
vue-计算属性computed如何传参
qq_41910413的博客
03-09 4017
vue-计算属性computed如何传参
vue中计算属性computed传递参数
大把小米的博客
12-21 2万+
vue中computed计算属性无法直接进行传参，如果有传参数的需求可以使用闭包函数（也叫匿名函数）实现。例如传过来不同的状态，我们设置成不同的颜色。（三目运算符可以实现但是只能设置两种，状态多了就不行了） :class="statusColor(item.status)" 使用computed computed: { statusColor() { return function(val) { console.log(val);//根据val进行操作 }
computed 传入参数
qq_36437172的博客
02-07 1万+
computed：计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容（computed 的值在 getter 执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取 computed 的值时才会重新调用对应的 getter 来计算）。 一般来说，需要依赖别的属性来动态获得值，有时候我们计算的值，与某个动态值关联，那我们又该如何向 computed 中传入参数呢？将计算属性返回值改为函数，再进行传值操作，同样我们使用方法也可以到达一样的效果。 comput
Vue3.0学习 - 第十三节，Vue3 setup中如何使用计算属性computed ， 父子组件如何传值
csl125的博客
05-06 9112
在vue2中我们可以使用计算属性computed 去定义一个计算属性并且去计算 代码片段： data() { return { num1: 0, num2: 0, }; }, computed: { result() { return parseInt(this.num1) + parseInt(this.num2); }, }, 我们可以知道是 num1和num2的和等于result 在vue3中我们如何..
vue中父组件向子组件传值，利用计算属性,传入的值只能是数值
qq_41482648的博客
08-13 2375
一、问题出现的背景 业务中会经常遇到两种需要改变prop的情况 一种是父组件传递初始值进来，子组件将它作为初始值保存起来，在自己的作用域下可以随意使用和修改。这种情况可以在组件data内，再声明一个数据，引用父组件的prop。 另一种情况就是prop作为需要被转变的原始值穿入。这种情况可以利用计算机属性。 二、问题出现的情况 我这次遇见的问题是在第二种情况下，来我们一起看看当时的情况（如下图所示）： 当时我通过prop传入了一个color,color的值是red,然后就发生了下面的事故（如下图所示），
vue组件传值props接受
08-16
- *3* [vue组件传值的12种方式](https://blog.csdn.net/weixin_46753476/article/details/126268686)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值