Vue 3.0 如何在不更改道具的情况下将道具分配给参考

Question

I'm sending from the parent component a prop: user . Now in the child component I want to make a copy of it without it changing the prop's value.

I tried doing it like this:

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

    return { user };
  }
});

But then if I change a value of the user object it also changes the apiUser prop. I thought maybe using Object.assign would work but then the ref isn't reactive anymore.

In Vue 2.0 I would do it like this:

export default {
  props: {
     apiUser: {
       required: true,
       type: Object
     }
  },
  data() {
    return {
      user: {}
    }
  },
  mounted() {
    this.user = this.apiUser;
    // Now I can use this.user without changing this.apiUser's value.
  }
};

Credits to @butttons for the comment that lead to the answer.

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

Answer 1

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

With the composition API we have the toRef API that allows you to create a copy from any source reactive object . Since the props object is a reactive , you use toRef() and it won't mutate your prop.

Answer 2

As discussed in comment section, a Vue 2 method that I'm personally fond of in these cases is the following, it will basically make a roundtrip when updating a model.

Parent (apiUser) ->
Child (clone apiUser to user, make changes, emit) ->
Parent (Set changes reactively) ->
Child (Automatically receives changes, and creates new clone)

Parent

<template>
   <div class="parent-root"
      <child :apiUser="apiUser" @setUserData="setUserData" />
   </div>
</template>

// ----------------------------------------------------
// (Obviously imports of child component etc.)
export default {
   data() {
      apiUser: {
         id: 'e134',
         age: 27
      }
   },

   methods: {
      setUserData(payload) {
         this.$set(this.apiUser, 'age', payload);
      }
   }
}

Child

<template>
   <div class="child-root"
      {{ apiUser }}
   </div>
</template>

// ----------------------------------------------------
// (Obviously imports of components etc.)
export default {
   props: {
      apiUser: {
         required: true,
         type: Object
      }
   },

   data() {
      user: null
   },

   watch: {
      apiUser: {
         deep: true,
         handler() {
            // Whatever clone method you want to use
            this.user = cloneDeep(this.apiUser);
         }
      }
   },

   mounted() {
      // Whatever clone method you want to use
      this.user = cloneDeep(this.apiUser);
   },

   methods: {
      // Whatever function catching the changes you want to do
      setUserData(payload) {
         this.$emit('setUserData', this.user);
      }
   }
}

Apologies for any miss types

Answer 3

This is what you looking for:https://vuejs.org/guide/components/props.html#one-way-data-flow

Create data where you add the prop to

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

Or if you use api composition:

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

You also may want to consider using computed methods (see also linked doc section from above) or v-model .

Please note that the marked solution https://stackoverflow.com/a/67820271/2311074 is not working. If you try to update user you will see a readonly error on the console. If you don't need to modify user, you may just use the prop in the first place.