vue3 defineProps 默认值如何设置一个异步值?

作者站长头像
站长
· 阅读数 20
<script lang="ts" setup>
import {  withDefaults } from 'vue'
import {  globalDada } from '@/data/index'

interface Props {
  text?: string; // cta文字
}

const props = withDefaults(defineProps<Props>(), {
  text: globalDada.a==2?'立即安装':'查看详情'
})

如上代码,我想给传入的属性 text 设置的默认值依赖 全局变量 globalDada.a,可是这个全局变量是初始化的时候请求接口返回的,这里初始化 props 的时候全局变量还没拿到值,则始终走三元判断的后面的逻辑,如何可以在设置 props 默认值中能拿到异步获取的数据?

回复
1个回答
avatar
test
2024-06-30

你不能直接改 props 的值,因为 props 是只读的,用一个变量来处理

<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
import { globalData } from 'vue'

interface Props {
  text?: string; // cta文字
}

const props = defineProps<Props>()


const localText = ref(props.text !== undefined ? props.text : (globalData.a == 2 ? '立即安装' : '查看详情'))

watchEffect(() => {
  
  if (props.text === undefined) {
    localText.value = globalData.a == 2 ? '立即安装' : '查看详情'
  }
})
</script>
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容