Vue3 子组件监听父组件传来异步数据的正确方式

最初想使用watch 配合着 computed 来监听父组件数据,发现没有必要反而造成代码冗余,如果参数一多很难维护。

正确方式:直接使用computed监听就好

js 复制代码
// 子组件
<script>
export default {
  props: {
    yesterDayfollow: {
      type: Array
    },
    transpond: {
      type: Array
    },
    cumulateUsers: {
      type: Array
    }
  },
  setup(props) {
    let yesterDayfollowRef = computed(() => props.yesterDayfollow.length) // 昨日关注
    let transpondRef = computed(() => props.transpond.length) // 昨日分享
    let cumulateUserRef = computed(
      () => props.cumulateUsers[0] && props.cumulateUsers[0].cumulate_user
    ) // 总用户数据

    return {
      yesterDayfollowRef,
      transpondRef,
      cumulateUserRef
    }
  }
}
</script>
  }
js 复制代码
// 获取昨日新增关注人数
getUserSummary(yesterDay, yesterDay).then((r) => {
  yesterDayfollow.value = r.list
})

// 获取图文分享转发数据
getUserShare(yesterDay, yesterDay).then((r) => {
  transpondRef.value = r.list
})

// 获取累计总用户数
getUserCumulate(yesterDay, yesterDay).then((r) => {
  cumulateUsers.value = r.list
})
相关推荐
影子信息36 分钟前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月37 分钟前
1.vue权衡的艺术
前端·vue.js·开源
RunsenLIu39 分钟前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
样子201841 分钟前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript
kevin_水滴石穿42 分钟前
Vue 中报错 TypeError: crypto$2.getRandomValues is not a function
前端·javascript·vue.js
翻滚吧键盘43 分钟前
vue文本插值
javascript·vue.js·ecmascript
华子w90892585944 分钟前
基于 SpringBoot+Vue.js+ElementUI 的 “花开富贵“ 花园管理系统设计与实现7000字论文
vue.js·spring boot·elementui
老家的回忆3 小时前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
hackchen4 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
用户7579419949704 小时前
Vue响应式原理推导过程
vue.js·响应式设计