computed能作为组件传值传递吗

el/2023/6/3 17:01:08

 

 

点击后

 

可以

你想想,你父组件有个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这种里面用,

http://www.ngui.cc/el/3419213.html

相关文章

如何在element的相应的行上加其他dom元素实现样式与功能呢

首先这个我看element官网还真没发现咋整,没法在table里再塞一行div啥的 不过自己想了个方法,其实动态定个位就好了,其实动态定位,动态大小啥的,在之前那家公司写uniapp的时候还真是写过好多次....各种兼容,动态获取宽高啥啥的,动态设置宽高等等属性 所以这个功能我就也想到了…

关于createElement的一些点

1.这里我用h代指createElement h(div, {domProps: {innerHTML: bag}}, [h(span, {domProps: {innerHTML: bag}}, []),h(span, {domProps: {innerHTML: bag}}, []),h(img, {domProps: {innerHTML: bag},attrs: {src: https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u…

关于watch

1.今天做个需求,一个对象传了好几层到子组件,然后子组件改了,这个对象也要同步到变化,最后通过保存回调,得到改了的数据传回来 我直接修改传的对象,比如通过两个el-radio的选中切换,但是传的数…

关于多层组件连续传值的改值问题,子改,孙改,或者父改,对传的数据的影响

下面是结论 <!-- 1.父组件传给子组件对象,子组件改传的对象的属性,父组件中传的这个值会变吗 会变 --> <!-- 2.父组件传给子组件对象,父组件改传的对象的属性,传给了子组件这个值会变吗 会变 --> <!-- 3.爷组件传给孙组件对象,孙组件改传的对象的属性,爷组件中传…

关于防抖与节流

他们都是不停地触发 只是他们的应对不一样 防抖是每次都清除定时器再开新的定时器&#xff0c;所以就会不管你多少次点击&#xff0c;也只会有一个定时器&#xff0c; 节流就是&#xff0c;首先默认flag为true 然后执行的时候先判断flag是否true 否则return 是的话进入执行&…

关于vue中的数据传递的响应以及watch的理解

首先看看这篇说的https://www.cnblogs.com/1032473245jing/p/11102919.html 1.将父组件数据赋值给子组件数据&#xff0c;子组件间接使用&#xff0c;数据仅在mounted中渲染&#xff0c;父组件数据改变子组件数据不改变&#xff0c;需要用watch监听&#xff0c;可以深度监听 …

react中解决下拉时,多个tooltip包裹的列表中,hover时,tooltip快速触发,闪烁问题

闪烁问题&#xff0c;是由于没有用div包裹元素 下拉时不让hover到的元素触发&#xff0c;停止下拉时才触发tooltip显示 这里就涉及到如何判断滚动中和滚动结束 只需要在滚动时记录下top1&#xff0c;而滚动时节流1000调用另一函数&#xff0c;此函数中再获取当前滚动条值记录…

一篇总结型文章,this,react中的this,document等node节点原型,实例和原型上的方法属性区分等

关于严格模式 use strictconsole.log(document)//此处说明开启了严格模式,也能通过window点出其属性// 只是window被隐藏了,但凡要打印window的地方,都会打印undefinedfunction hj() {console.log(this)//严格模式下,打印undefined,非严格模式,打印window}hj()console.log(win…

关于vue路由和路由拦截的一些小问题

// 总的来说两个问题 // 1.路由重复点击报红错误 // 解决方法:重写push方法,cathc掉错误,就不显示了 // 2.路由重复点击栈溢出 // 在beforEach方法里,判断重复路由,就next(false) import Vue from vue import Router from vue-router import HelloWorld from /components/…

react粘贴图片上传的尝试,没完成,有bug,删除之后,粘贴会失效,不知道为什么

/*** 新增缺陷弹出框*/ "use strict"; import "./index.less"; import React, { Component } from "react"; import { message } from "edspUI"; import moment from "moment"; import {InfoCircleOutlined,FolderOutlined,…