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
})
相关推荐
Gracemark3 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼4 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_5 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing6 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
最后一个农民工8 小时前
vue3实现仿豆包模版式智能输入框
前端·vue.js
艾小码11 小时前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
wusp199412 小时前
项目实战——“微商城”前后台【005】之前台项目首页编写
vue.js·vant·底部导航栏
森林的尽头是阳光12 小时前
vue防抖节流,全局定义,使用
前端·javascript·vue.js
计算机毕业设计木哥12 小时前
计算机毕设选题推荐:基于Java+SpringBoot物品租赁管理系统【源码+文档+调试】
java·vue.js·spring boot·mysql·spark·毕业设计·课程设计
zero13_小葵司12 小时前
Vue 3 前端工程化规范
前端·javascript·vue.js