Solución:
Gracias a esto https://github.com/vuejs/vuejs.org/pull/567 ahora sé la respuesta.
Método 1
Pase el apoyo inicial directamente a los datos. Como el ejemplo en documentos actualizados:
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
Pero tenga en cuenta que si la propiedad pasada es un objeto o matriz que se usa en el estado del componente principal, cualquier modificación a esa propiedad dará como resultado el cambio en el estado de ese componente principal.
Advertencia: este método no se recomienda. Hará que sus componentes sean impredecibles. Si necesita configurar los datos principales de los componentes secundarios, use la administración de estado como Vuex o use “v-model”. https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components
Método 2
Si su prop inicial es un objeto o matriz y si no desea que los cambios en el estado de los niños se propaguen al estado principal, simplemente use, por ejemplo, Vue.util.extend [1] para hacer una copia de los accesorios en lugar de apuntarla directamente a los datos de los niños, así:
props: ['initialCounter'],
data: function () {
return {
counter: Vue.util.extend({}, this.initialCounter)
}
}
Método 3
También puede utilizar el operador de propagación para clonar los accesorios. Más detalles en la respuesta de Igor: https://stackoverflow.com/a/51911118/3143704
Pero tenga en cuenta que los operadores de propagación no son compatibles con los navegadores más antiguos y, para una mejor compatibilidad, deberá transpilar el código, por ejemplo, usando babel.
Notas al pie
[1] Tenga en cuenta que esta es una utilidad interna de Vue y puede cambiar con nuevas versiones. Es posible que desee utilizar otros métodos para copiar ese accesorio, consulte “¿Cómo clono correctamente un objeto JavaScript?”.
Mi violín donde lo estaba probando: https://jsfiddle.net/sm4kx7p9/3/
En compañía de la respuesta de @ dominik-serafin:
En caso de que esté pasando un objeto, puede clonarlo fácilmente utilizando el operador de propagación (sintaxis ES6):
props: {
record: {
type: Object,
required: true
}
},
data () { // opt. 1
return {
recordLocal: {...this.record}
}
},
computed: { // opt. 2
recordLocal () {
return {...this.record}
}
},
Pero lo más importante es recordar utilizar opt. 2 en caso de que esté pasando un valor calculado, o más que un valor asincrónico. De lo contrario, el valor local no se actualizará.
Manifestación:
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/
Creo que lo está haciendo bien porque es lo que se indica en los documentos.
Defina una propiedad de datos local que use el valor inicial de la propiedad como su valor inicial
https://vuejs.org/guide/components.html#One-Way-Data-Flow