Vue 3.0 如何在不更改 prop 的情况下将 prop 分配给 ref

Question

我从父组件发送一个道具：user。现在，在子组件中，我想复制它而不改变 prop 的值。

我尝试这样做：

export default defineComponent({
  props: {
    apiUser: {
      required: true,
      type: Object
    }
  },
  setup(props) {
    const user = ref(props.apiUser);

    return { user };
  }
});

但是，如果我更改用户对象的值，它也会更改 apiUser 属性。我想也许使用Object.assign会起作用，但随后裁判不再有反应。

在 Vue 2.0 中我会这样做：

export default defineComponent({
  props: {
    apiUser: {
      required: true,
      type: Object
    }
  },
  setup(props) {
    const user = ref(props.apiUser);

    return { user };
  }
});

感谢 @buttons 的评论，得出了答案。

const user = reactive({ ...props.apiUser });

Answer 1

props: {
 apiUser: {
   required: true,
   type: Object
 }
},
setup(props) {
   const userCopy = toRef(props, 'apiUser')
}

通过组合 API，我们拥有toRef API，它允许您从任何source reactive object. 由于该props对象是 a reactive，因此您使用toRef()它不会改变您的道具。

Answer 2

这就是您要找的：https ://vuejs.org/guide/components/props.html#one-way-data-flow

在添加 prop 的位置创建数据

export default {
  props: ['apiUser'],
  data() {
    return {
      // user only uses this.apiUser as the initial value;
      // it is disconnected from future prop updates.
      user: this.apiUser
    }
  }
}

或者如果你使用 api 组合：

import {ref} from "vue";
const props = defineProps(['apiUser']);
const user = ref(props.apiUser);

您可能还需要考虑使用计算方法（另请参阅上面的链接文档部分）或v-model。

请注意，标记的解决方案/sf/answers/4747419001/不起作用。如果您尝试更新，user您将在控制台上看到只读错误。如果您不需要修改用户，则可以首先使用该道具。