Bu yüzden, bir Vue bileşenine props aktarmak istiyorum, ancak bu props'ların gelecekte bu bileşenin içinden değişmesini bekliyorum, örneğin, AJAX kullanarak o Vue bileşenini içeriden güncellediğimde. Bu yüzden sadece bileşenin ilklendirilmesi içindir.

Benim cars-listVue I başlangıç özellikleri olan sahne geçen yapı elemanı 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>

Bunu hemen yapmak yolu içim o single-carbileşenin ben atıyorum this.initialPropertiesbenim için this.data.propertiesilgili created()başlatma kanca. Ve işe yarıyor ve reaktif.

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

Ama bununla ilgili sorunum, bunu yapmanın doğru bir yolu olup olmadığını bilmemem mi? Yol boyunca bana bazı sorunlara neden olmaz mı? Yoksa bunu yapmanın daha iyi bir yolu var mı?

Bu https://github.com/vuejs/vuejs.org/pull/567 sayesinde cevabı şimdi biliyorum.

Yöntem 1

İlk pervaneyi doğrudan verilere aktarın. Güncellenen dokümanlardaki örnek gibi:

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

Ancak, aktarılan prop, ana bileşen durumunda kullanılan bir nesne veya dizi ise, bu prop üzerinde yapılacak herhangi bir değişiklik, üst bileşen durumunda değişikliğe yol açacaktır.

Uyarı : bu yöntem önerilmez. Bileşenlerinizi öngörülemez hale getirecektir. Alt bileşenlerden üst verileri ayarlamanız gerekiyorsa, Vuex gibi durum yönetimini veya "v-modelini" kullanın. https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

Yöntem 2

İlk prop'unuz bir nesne veya diziyse ve alt durumdaki değişikliklerin üst duruma yayılmasını istemiyorsanız, örneğin Vue.util.extend[1] 'i doğrudan alt verilere işaret etmek yerine propların bir kopyasını yapmak için kullanın, örneğin:

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

Yöntem 3

Nesneleri klonlamak için yayma operatörünü de kullanabilirsiniz. Igor yanıtında daha fazla ayrıntı: https://stackoverflow.com/a/51911118/3143704

Ancak, yayılma operatörlerinin eski tarayıcılarda desteklenmediğini ve daha iyi uyumluluk için, örneğin kullanarak kodu aktarmanız gerekeceğini unutmayın babel.

Dipnotlar

[1] Bunun dahili bir Vue yardımcı programı olduğunu ve yeni sürümlerle değişebileceğini unutmayın. Bu pervaneyi kopyalamak için başka yöntemler kullanmak isteyebilirsiniz, bkz. " Bir JavaScript nesnesini nasıl doğru bir şekilde klonlarım? ".

Test ettiğim kemanım: https://jsfiddle.net/sm4kx7p9/3/

@ Dominik-serafin'in cevabına eşlik eden:

Bir nesneyi geçirmeniz durumunda, onu yayma işleci (ES6 Sözdizimi) kullanarak kolayca klonlayabilirsiniz:

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

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

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

Ancak en önemlisi, opt. 2, hesaplanan bir değer veya bundan daha fazla bir zaman uyumsuz değer geçirmeniz durumunda. Aksi takdirde yerel değer güncellenmeyecektir.

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/vue@2.5.17/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/

Bunu doğru yaptığına inanıyorum çünkü belgelerde belirtildiği gibi.

Pervanenin başlangıç ​​değerini başlangıç ​​değeri olarak kullanan yerel bir veri özelliği tanımlama

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