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

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

<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 默认值中能拿到异步获取的数据？

回答：

你不能直接改 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>

以上是 vue3 defineProps 默认值如何设置一个异步值？ 的全部内容， 来源链接： utcz.com/p/934622.html

回到顶部