ดังนั้นฉันต้องการส่งอุปกรณ์ประกอบฉากไปยังส่วนประกอบ Vue แต่ฉันคาดว่าอุปกรณ์ประกอบฉากเหล่านี้จะเปลี่ยนแปลงในอนาคตจากภายในส่วนประกอบนั้นเช่นเมื่อฉันอัปเดตส่วนประกอบ Vue นั้นจากภายในโดยใช้ AJAX ดังนั้นจึงมีไว้สำหรับการเริ่มต้นส่วนประกอบเท่านั้น

cars-listองค์ประกอบองค์ประกอบ Vue ของฉันที่ฉันส่งผ่านอุปกรณ์ประกอบฉากที่มีคุณสมบัติเริ่มต้นไปที่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>

วิธีที่ฉันทำตอนนี้คือภายในsingle-carส่วนประกอบของฉันฉันกำหนด this.initialPropertiesให้this.data.propertiesกับcreated()ตะขอเริ่มต้น และทำงานและมีปฏิกิริยา

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

แต่ปัญหาของฉันคือฉันไม่รู้ว่าเป็นวิธีที่ถูกต้องหรือไม่? มันจะทำให้ฉันมีปัญหาระหว่างทางบ้างไหม? หรือมีวิธีที่ดีกว่านี้ไหม

ขอบคุณhttps://github.com/vuejs/vuejs.org/pull/567ตอนนี้ฉันรู้คำตอบแล้ว

วิธีที่ 1

ส่งเสาหลักไปยังข้อมูลโดยตรง เช่นเดียวกับตัวอย่างในเอกสารที่อัปเดต:

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

แต่โปรดทราบว่าถ้า prop ที่ส่งผ่านเป็นอ็อบเจ็กต์หรืออาร์เรย์ที่ใช้ในสถานะคอมโพเนนต์พาเรนต์การแก้ไขใด ๆ กับ prop นั้นจะส่งผลให้สถานะองค์ประกอบพาเรนต์เปลี่ยนไป

คำเตือน : ไม่แนะนำให้ใช้วิธีนี้ มันจะทำให้ส่วนประกอบของคุณไม่สามารถคาดเดาได้ หากคุณต้องการตั้งค่าข้อมูลพาเรนต์จากคอมโพเนนต์ย่อยให้ใช้การจัดการสถานะเช่น Vuex หรือใช้ "v-model" https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

วิธีที่ 2

หากเสาเริ่มต้นของคุณเป็นวัตถุหรืออาร์เรย์และหากคุณไม่ต้องการให้การเปลี่ยนแปลงในสถานะลูกแพร่กระจายไปยังสถานะแม่ให้ใช้เช่นVue.util.extend[1] เพื่อสร้างสำเนาของอุปกรณ์ประกอบฉากแทนที่จะชี้ไปที่ข้อมูลลูกโดยตรงเช่นนี้:

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

วิธีที่ 3

คุณยังสามารถใช้ตัวดำเนินการกระจายเพื่อโคลนอุปกรณ์ประกอบฉาก รายละเอียดเพิ่มเติมในคำตอบของ Igor: https://stackoverflow.com/a/51911118/3143704

แต่มีในใจว่าผู้ประกอบการแพร่กระจายยังไม่ได้รับการสนับสนุนในเบราว์เซอร์รุ่นเก่าและเข้ากันได้ดีกว่าที่คุณจะต้อง transpile babelเช่นรหัสโดยใช้

เชิงอรรถ

[1] โปรดทราบว่านี่เป็นยูทิลิตี้ Vue ภายในและอาจมีการเปลี่ยนแปลงตามเวอร์ชันใหม่ คุณอาจต้องการใช้วิธีอื่นในการคัดลอกเสานั้นโปรดดูที่ " ฉันจะโคลนวัตถุ JavaScript อย่างถูกต้องได้อย่างไร "

ซอของฉันที่ฉันกำลังทดสอบ: https://jsfiddle.net/sm4kx7p9/3/

ร่วมกับคำตอบของ @ dominik-serafin:

ในกรณีที่คุณกำลังส่งผ่านวัตถุคุณสามารถโคลนได้อย่างง่ายดายโดยใช้ตัวดำเนินการกระจาย (ไวยากรณ์ ES6):

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

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

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

แต่ที่สำคัญที่สุดคืออย่าลืมเลือกใช้ 2 ในกรณีที่คุณส่งค่าจากการคำนวณหรือมากกว่าค่าอะซิงโครนัส มิฉะนั้นค่าท้องถิ่นจะไม่อัปเดต

การสาธิต:

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/

ฉันเชื่อว่าคุณทำถูกต้องเพราะเป็นสิ่งที่ระบุไว้ในเอกสาร

กำหนดคุณสมบัติข้อมูลโลคัลที่ใช้ค่าเริ่มต้นของ prop เป็นค่าเริ่มต้น

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