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
})
相关推荐
星星会笑滴1 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
Backstroke fish1 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue
临枫5411 小时前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
RAY_CHEN.2 小时前
vue3 pinia 中actions修改状态不生效
vue.js·typescript·npm
酷酷的威朗普2 小时前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
_Legend_King2 小时前
vue3 + elementPlus 日期时间选择器禁用未来及过去时间
javascript·vue.js·elementui
景天科技苑2 小时前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
小行星1252 小时前
前端预览pdf文件流
前端·javascript·vue.js
join82 小时前
解决vue-pdf的签章不显示问题
javascript·vue.js·pdf
小行星1252 小时前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf