vue模板中的插值是promise怎么变成固定值传到下一个组件

  • Z时代
  • 2024-03-09
  • 分类：IT

vue模板中的插值是promise怎么变成固定值传到下一个组件

父组件
<child-cmp :notices="calcSize()" />

这个calcSize是需要异步是获取的,伪代码如下

async calcSize() {
    return await this.queryNoticeSize()
}

子组件

export default {
  name: 'ChildCMPanel',
  props: {
    notices: {
      type: [String, Number],
      default: 0
    }
  },

抱歉了
上述的描述不详尽。至所以用方法而不是data变量因为子组件是一个循环。

需求是一个菜单列表.这个某个菜单有新记录时,notice>0.

父组件

<child-cmp :path="item.path" :notices="calcSize(item.path)" v-for="(item,index) in menuList" />

回答：

你应该使用一个响应式变量要记录这个值，并传递给子组件，在异步函数回调时候修改变量，子组件自动根据响应更新：

<template>
  <ChildCMPanel :notices="notices" />
</template>
<script setup>
import { ref, onMounted } from 'vue'
import ChildCMPanel from 'ChildCMPanel.vue'
const notices = ref('')
async calcSize() {
  return await this.queryNoticeSize()
}
// 想在组件挂载后再请求（推荐做法，最好不要使用 async setup）
onMounted(async () => {
  notices.value = await calcSize()
})
// 直接调用时可以使用传统 Promise 写法
calcSize().then(value => {
  notices.value = value
})
</script>

回答：

你赋值到data上再传入子组件不行？

<child-cmp :notices="notices" />
created() {
    this.calcSize();
}
methods: {
    async calcSize() {
        this.notices = await this.queryNoticeSize()
    }
}

回答：

使用响应数据即可；
看你更新了,直接把操作放在子组件内部完成就可以了，外部只传一个item参数 notices 组件内部自己去实现

以上是 vue模板中的插值是promise怎么变成固定值传到下一个组件 的全部内容， 来源链接： utcz.com/p/937359.html

回到顶部