Vì vậy, tôi muốn chuyển các đạo cụ cho một thành phần Vue, nhưng tôi hy vọng các đạo cụ này sẽ thay đổi trong tương lai từ bên trong thành phần đó, ví dụ khi tôi cập nhật thành phần Vue đó từ bên trong bằng AJAX. Vì vậy, chúng chỉ để khởi tạo thành phần.

cars-listPhần tử thành phần Vue của tôi nơi tôi chuyển các đạo cụ có thuộc tính ban đầu cho 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>

Cách tôi làm điều đó ngay bây giờ nó rằng bên trong của tôi single-carphần tôi gán this.initialPropertiescho tôi this.data.propertiestrên created()móc khởi tạo. Và nó hoạt động và phản ứng.

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

Nhưng vấn đề của tôi với điều đó là tôi không biết đó có phải là một cách làm đúng hay không? Nó sẽ không gây cho tôi một số rắc rối trên đường đi? Hoặc là có một cách tốt hơn để làm điều đó?

Cảm ơn https://github.com/vuejs/vuejs.org/pull/567 này tôi biết câu trả lời ngay bây giờ.

Phương pháp 1

Truyền trực tiếp hỗ trợ ban đầu vào dữ liệu. Giống như ví dụ trong tài liệu cập nhật:

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

Nhưng hãy lưu ý nếu prop được truyền vào là một đối tượng hoặc mảng được sử dụng trong trạng thái thành phần mẹ, bất kỳ sửa đổi nào đối với prop đó sẽ dẫn đến thay đổi trong trạng thái thành phần mẹ đó.

Cảnh báo : phương pháp này không được khuyến khích. Nó sẽ làm cho các thành phần của bạn không thể đoán trước được. Nếu bạn cần đặt dữ liệu mẹ từ các thành phần con, hãy sử dụng quản lý trạng thái như Vuex hoặc sử dụng "v-model".https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

Phương pháp 2

Nếu phần hỗ trợ ban đầu của bạn là một đối tượng hoặc mảng và nếu bạn không muốn các thay đổi trong trạng thái con được truyền sang trạng thái mẹ thì chỉ cần sử dụng ví dụ: Vue.util.extend[1] để tạo bản sao của các đạo cụ thay vì trỏ nó trực tiếp đến dữ liệu con, như sau:

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

Phương pháp 3

Bạn cũng có thể sử dụng toán tử spread để sao chép các đạo cụ. Thêm chi tiết trong câu trả lời Igor: https://stackoverflow.com/a/51911118/3143704

Nhưng hãy nhớ rằng toán tử lây lan không được hỗ trợ trong các trình duyệt cũ hơn và để tương thích tốt hơn, bạn sẽ cần chuyển mã, ví dụ như sử dụng babel.

Chú thích

[1] Hãy nhớ rằng đây là một tiện ích Vue nội bộ và nó có thể thay đổi với các phiên bản mới. Bạn có thể muốn sử dụng các phương pháp khác để sao chép chỗ dựa đó, hãy xem " Làm cách nào để sao chép chính xác một đối tượng JavaScript? ".

Fiddle của tôi nơi tôi đang thử nghiệm nó: https://jsfiddle.net/sm4kx7p9/3/

Đồng hành với câu trả lời của @ dominik-serafin:

Trong trường hợp bạn đang truyền một đối tượng, bạn có thể dễ dàng sao chép nó bằng cách sử dụng toán tử spread (Cú pháp ES6):

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

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

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

Nhưng quan trọng nhất là hãy nhớ sử dụng tùy chọn. 2 trong trường hợp bạn đang chuyển một giá trị được tính toán hoặc nhiều hơn một giá trị không đồng bộ. Nếu không, giá trị cục bộ sẽ không cập nhật.

Bản giới thiệu:

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/

Tôi tin rằng bạn đang làm đúng vì đó là những gì được nêu trong tài liệu.

Xác định thuộc tính dữ liệu cục bộ sử dụng giá trị ban đầu của prop làm giá trị ban đầu của nó

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