Отже, я хочу передати реквізит компоненту 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

Ви також можете використовувати оператор поширення для клонування реквізиту. Детальніше у відповіді Ігоря: https://stackoverflow.com/a/51911118/3143704

Але майте на увазі, що оператори поширення не підтримуються у старих браузерах, і для кращої сумісності вам потрібно буде переписати код, наприклад, використовуючи 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}
  }
},

Але найголовніше - пам’ятати про використання opt. 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/

Я вважаю, що ви робите це правильно, оскільки саме це зазначено в документах.

Визначте локальну властивість даних, яка використовує початкове значення пропа як початкове значення

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