vue3 props 是对象的情况如何变为响应式?

• Z时代
• 2024-02-23
• 分类：IT

如题，定义一个组件，设置 props 如下：

interface Props {
  decorateConfig: {
    'src'?: string
  },
  width?: number,
  height?: number
}

const props = withDefaults(defineProps<Props>(), {
  decorateConfig: () => {
    return {
      src: ''
    }
  }
})

当我直接定义

const src = props.decorateConfig.src

的时候，会提示这样会失去响应性

Getting a value from the `props` in root scope of `<script setup>` will cause the value to lose reactivity.

所以想问下，如何可以将这样的定义，转为响应性

回答：

在 render function 外部访问 props 的值，还想保留响应式的话，需要用 computed 来处理

const src = computed(() => props.decorateConfig.src)

以上是 vue3 props 是对象的情况如何变为响应式? 的全部内容， 来源链接： utcz.com/p/935087.html