vuejs3 - 如何使对象在 Vue 3 中作为 Prop 传递？

Question

当传递的对象中的字段发生变化时，我需要响应式地更改我的组件。

<template>
<my-component :prop="prop" />
</template>

<script>

export default {
    data() {
        return {
            prop: {
                key: 'value',
                flag: true
            }
        }
    }
}
</script>

我的组件.vue

<template>
    <div v-if="flag">Yay, it's a flag!</div>
    <div v-else>I am very sad rn</div>
</template>

<script>

export default {
    props: {
        prop: Object
    },
    setup(props) {
        const prop = ref(props, 'prop')
        const flag = // *

        return { flag }
    }
}
</script>

• 不知道在这里做什么，prop.flag、prop.value.flag 不起作用。

我还尝试了类似 const flag = ref(prop, 'flag') 然后是 flag.value，甚至 const flag = req(prop .value, 'flag')，但运气不好。

Answer 1

如果您声明 Props，它们在组件中是可访问的和响应式(Reactive)的。由于您没有，它们将不可用。

例如，这就是您所需要的:

<template>
  <div v-if="prop.flag">Yay, it's a flag!</div>
  <div v-else>I am very sad rn</div>
</template>

<script>
export default {
  props: {
    prop: Object
  }
}
</script>