如何使对象在 Vue 3 中作为道具传递？答案

【问题标题】：How to make an object passed as a prop in Vue 3 reactive?如何使对象在 Vue 3 中作为道具传递？
【发布时间】：2022-01-26 18:10:40
【问题描述】：

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

<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')，但没有运气。

【问题讨论】：

标签： vuejs3

【解决方案1】：

如果您声明道具，则它们可以在组件中访问和响应。由于您没有，它们将不可用。

例如，这就是你所需要的：

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

【讨论】：

我的意思是，当然。我只是忘记在示例中添加此字段。

【解决方案2】：

只需使用toRef 或toRefs

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

<script>
import { toRefs, toRef } from 'vue';
export default {
    props: {
        prop: Object
    },
    setup(props) {
        const { prop } = toRefs(props);
        //alternative
        const prop = toRef(props, 'prop');
        const flag = // *

        return { flag }
    }
}
</script>

【讨论】：