W moim rodzica komponent VUE mam obiekt user.

Jeśli przekazuję ten obiekt użytkownika do elementu dziecka jako prop:

<child :user="user"></child>

A w moim komponencie dziecięcy zaktualizuję user.name, również zostanie zaktualizowany w rodzicach.

Chcę edytować obiekt użytkownika w składniku dziecka bez zmian w obiekcie użytkownika w komponencie macierzystym.

Czy jest lepszy sposób na osiągnięcie tego niż klonowanie obiektu z: JSON.parse(JSON.stringify(obj))?

14
user3743266 28 czerwiec 2017, 01:20

4 odpowiedzi

Najlepsza odpowiedź

Nie musisz używać obiektu JSON.

const child = {
  props:["user"],
  data(){
    return {
      localUser: Object.assign({}, this.user)
    }
  }
}

Użyj localUser (lub cokolwiek chcesz zadzwonić) wewnątrz swojego dziecka.

Edytuj

Zmodyfikowałem skrzypkę stworzoną na kolejną odpowiedź na to pytanie, aby zademonstrować powyższą koncepcję i zapytał @ user3743266

Przyjeżdżam ze sobą, a ja znam to bardzo przydatne. Twój przykład działa dobrze. W dziecku stworzyłeś element w danych, które wymaga kopii rekwizytu, a dziecko współpracuje z kopią. Ciekawe i przydatne, ale ... Nie jest dla mnie jasne, gdy lokalna kopia zostanie zaktualizowana, jeśli coś innego modyfikuje rodzica. Zmodyfikowałem swoje skrzypce, usuwając V-IFS, więc wszystko jest widoczne i powielanie elementu edycji. Jeśli modyfikujesz nazwę w jednym komponencie, drugi jest osierocony i nie otrzymuje zmian?

Obecny komponent wygląda tak:

Vue.component('edit-user', {
  template: `
  <div>
    <input type="text" v-model="localUser.name">
    <button @click="$emit('save', localUser)">Save</button>
    <button @click="$emit('cancel')">Cancel</button>
  </div>
  `,
  props: ['user'],
  data() {
    return {
      localUser: Object.assign({}, this.user)
    }
  }
})

Ponieważ podjęła decyzję projektową, aby użyć lokalnego Użytkownika Użytkownika, @ User3743266 jest poprawny, komponent nie jest automatycznie aktualizowany. Nieruchomość user jest aktualizowana, ale localUser nie jest. W takim przypadku Jeśli Chciałeś automatycznie aktualizować lokalne dane, gdy zmienia się nieruchomość, potrzebowałbyś obserwatora.

Vue.component('edit-user', {
  template: `
  <div>
    <input type="text" v-model="localUser.name">
    <button @click="$emit('save', localUser)">Save</button>
    <button @click="$emit('cancel')">Cancel</button>
  </div>
  `,
  props: ['user'],
  data() {
    return {
      localUser: Object.assign({}, this.user)
    }
  },
  watch:{
    user(newUser){
        this.localUser = Object.assign({}, newUser)
    }
  }
})

Oto zaktualizowana skrzypce.

Pozwala to na pełną kontrolę, gdy / jeśli lokalne dane są aktualizowane lub emitowane. Na przykład, możesz sprawdzić stan przed aktualizacją stanu lokalnego.

  watch:{
    user(newUser){
      if (condition)
        this.localUser = Object.assign({}, newUser)
    }
  }

Jak powiedziałem gdzie indziej, są czasy, kiedy będziesz chciał skorzystać z właściwości obiektów, ale są też takie czasy, w których możesz chcieć więcej kontroli.

27
Bert 29 czerwiec 2017, 18:04

W powyższych rozwiązaniach obserwator nie uruchomi się na pierwszym wiązaniu, tylko na zmianę. Aby rozwiązać to, użyj natychmiastowego = prawdziwe

watch: {
  test: {
    immediate: true,
    handler(newVal, oldVal) {
      console.log(newVal, oldVal)
    },
  },
}
1
Zoe 13 maj 2019, 14:52

Zgodnie z tym, dzieci "nie mogą" i "nie powinni" t "zmodyfikuj dane ich rodziców. Ale Tutaj widać, że jeśli rodzic przechodzi niektóre dane reaktywne jako nieruchomość do dziecka , Jest to odniesienie do odniesienia, a rodzic widzi zmiany dziecka. To prawdopodobnie to, czego chcesz przez większość czasu, nie? Modyfikujesz tylko dane, które rodzica wyraźnie udostępnił. Jeśli chcesz, aby dziecko miało niezależną kopię user, mógłbyś to zrobić za pomocą JSON.PARSE (JSON.Stingify ()), ale uważaj, że będziesz serializowany Właściwości Vue-Wtryskiwane. Kiedy to zrobiłeś? Pamiętaj, że rekwizyty są reaktywne, więc rodzic mógł wysłać nowy użytkownik w dowolnym momencie, wycierając lokalne zmiany?

Być może musisz powiedzieć nam więcej o tym, dlaczego chcesz, aby dziecko miało własną kopię? Co zrobi dziecko z jego kopią? Jeśli użytkownik dziecka pochodzi od użytkownika rodzica w niektórych systematycznych sposób (przewodnie cały tekst lub coś), spójrz na właściwości obliczone.

0
bbsimonbb 28 czerwiec 2017, 08:47

Możesz mieć zmienną danych tylko z informacjami, które chcesz być lokalnie edytowalny i załaduj wartość w utworzonej metodzie

data() {
return { localUserData: {name: '', (...)}
}
(...)
created() {
    this.localUserData.name = this.user.name;
}

W ten sposób utrzymujesz go, z których dane można edytować. W zależności od potrzeby, możesz mieć obserwatora, aby zaktualizować LocalData w przypadku zmiany podpisu użytkownika.

0
Victor Mikó 28 czerwiec 2017, 08:47