Ich möchte also Requisiten an eine Vue-Komponente übergeben, aber ich erwarte, dass sich diese Requisiten in Zukunft innerhalb dieser Komponente ändern, z. B. wenn ich diese Vue-Komponente mithilfe von AJAX von innen aktualisiere. Sie dienen also nur zur Initialisierung der Komponente.

Mein cars-listVue-Komponentenelement, an das ich Requisiten mit anfänglichen Eigenschaften übergebe single-car:

// cars-list.vue

<script>
    export default {
        data: function() {
            return {
                cars: [
                    {
                        color: 'red',
                        maxSpeed: 200,
                    },
                    {
                        color: 'blue',
                        maxSpeed: 195,
                    },
                ]
            }
        },
    }
</script>

<template>
    <div>
        <template v-for="car in cars">
            <single-car :initial-properties="car"></single-car>
        </template>
    </div>
</template>

So wie ich es jetzt single-carmache, ordne ich es in meiner Komponente this.initialPropertiesmeinem this.data.propertiesOn- created()Initialisierungs-Hook zu. Und es funktioniert und ist reaktiv.

// single-car.vue

<script>
    export default {
        data: function() {
            return {
                properties: {},
            }
        },
        created: function(){
            this.data.properties = this.initialProperties;
        },
    }
</script>

<template>
    <div>Car is in {{properties.color}} and has a max speed of {{properties.maxSpeed}}</div>
</template>

Aber mein Problem dabei ist, dass ich nicht weiß, ob das der richtige Weg ist? Wird es mir nicht Probleme auf der Straße bereiten? Oder gibt es einen besseren Weg, dies zu tun?

Dank dieser https://github.com/vuejs/vuejs.org/pull/567 kenne ich die Antwort jetzt.

Methode 1

Übergeben Sie die erste Requisite direkt an die Daten. Wie das Beispiel in aktualisierten Dokumenten:

props: ['initialCounter'],
data: function () {
    return {
        counter: this.initialCounter
    }
}

Beachten Sie jedoch, dass jede Änderung an dieser Requisite zu einer Änderung des Status der übergeordneten Komponente führt, wenn die übergebene Requisite ein Objekt oder Array ist, das im Status der übergeordneten Komponente verwendet wird.

Warnung : Diese Methode wird nicht empfohlen. Dadurch werden Ihre Komponenten unvorhersehbar. Wenn Sie übergeordnete Daten aus untergeordneten Komponenten festlegen müssen, verwenden Sie entweder die Statusverwaltung wie Vuex oder "v-model". https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

Methode 2

Wenn Ihre ursprüngliche Requisite ein Objekt oder Array ist und Sie nicht möchten, dass Änderungen im untergeordneten Status in den übergeordneten Status übertragen werden, verwenden Sie einfach z. B. Vue.util.extend[1], um eine Kopie der Requisiten zu erstellen, anstatt sie direkt auf untergeordnete Daten zu verweisen, wie folgt:

props: ['initialCounter'],
data: function () {
    return {
        counter: Vue.util.extend({}, this.initialCounter)
    }
}

Methode 3

Sie können auch den Spread-Operator verwenden, um die Requisiten zu klonen. Weitere Details in der Igor-Antwort: https://stackoverflow.com/a/51911118/3143704

Beachten Sie jedoch, dass Spread-Operatoren in älteren Browsern nicht unterstützt werden. Für eine bessere Kompatibilität müssen Sie den Code z babel. B. mithilfe von transpilieren .

Fußnoten

[1] Beachten Sie, dass dies ein internes Vue-Dienstprogramm ist und sich mit neuen Versionen ändern kann. Möglicherweise möchten Sie andere Methoden verwenden, um diese Requisite zu kopieren. Weitere Informationen finden Sie unter " Wie klone ich ein JavaScript-Objekt korrekt? ".

Meine Geige, wo ich sie getestet habe: https://jsfiddle.net/sm4kx7p9/3/

In Begleitung der Antwort von @ dominik-serafin:

Wenn Sie ein Objekt übergeben, können Sie es einfach mit dem Spread-Operator (ES6-Syntax) klonen:

 props: {
   record: {
     type: Object,
     required: true
   }
 },

data () { // opt. 1
  return {
    recordLocal: {...this.record}
  }
},

computed: { // opt. 2
  recordLocal () {
    return {...this.record}
  }
},

Am wichtigsten ist es jedoch, sich daran zu erinnern, opt zu verwenden. 2 für den Fall, dass Sie einen berechneten Wert oder mehr einen asynchronen Wert übergeben. Andernfalls wird der lokale Wert nicht aktualisiert.

Demo:

Vue.component('card', { 
  template: '#app2',
  props: {
    test1: null,
    test2: null
  },
  data () { // opt. 1
    return {
      test1AsData: {...this.test1}
    }
  },
  computed: { // opt. 2
    test2AsComputed () {
      return {...this.test2}
    }
  }
})

new Vue({
  el: "#app1",
  data () {
    return {
      test1: {1: 'will not update'},
      test2: {2: 'will update after 1 second'}
    }
  },
  mounted () {
    setTimeout(() => {
      this.test1 = {1: 'updated!'}
      this.test2 = {2: 'updated!'}
    }, 1000)
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="app1">
  <card :test1="test1" :test2="test2"></card>
</div>

<template id="app2">
  <div>
    test1 as data: {{test1AsData}}
    <hr />
    test2 as computed: {{test2AsComputed}}
  </div>
</template>

https://jsfiddle.net/nomikos3/eywraw8t/281070/

Ich glaube, Sie machen es richtig, weil es das ist, was in den Dokumenten angegeben ist.

Definieren Sie eine lokale Dateneigenschaft, die den Anfangswert der Requisite als Anfangswert verwendet

https://vuejs.org/guide/components.html#One-Way-Data-Flow