vue3 defineProps 默认值如何设置一个异步值?
<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个回答

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>
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容