javascript - props - vuetify
VueJs 2.0-como escuchar los cambios de ''props'' (10)
En los
documentos de VueJs 2.0
no puedo encontrar ningún gancho que escuche los cambios de
props
.
¿VueJs tiene ganchos como
onPropsUpdated()
o similares?
Actualizar
Como sugirió @wostex, intenté
watch
mi propiedad pero nada cambió.
Entonces me di cuenta de que tengo un caso especial:
<template>
<child :my-prop="myProp"></child>
</template>
<script>
export default {
props: [''myProp'']
}
</script>
Estoy pasando
myProp
que el componente primario recibe al componente
child
.
Entonces el
watch: {myProp: ...}
no funciona.
Él,
en mi caso, necesitaba una solución en la que cada vez que cambiaran los accesorios, necesitaba analizar mis datos nuevamente. Estaba cansado de hacer un vigilante separado para todos mis accesorios, así que usé esto:
watch: {
$props: {
handler() {
this.parseData();
},
deep: true,
immediate: true,
},
El punto clave que debemos sacar de este ejemplo es usar
deep: true
para que no solo vea $ props sino también valores anidados como, por ejemplo,
props.myProp
Puede obtener más información sobre estas opciones de reloj ampliado aquí: https://vuejs.org/v2/api/#vm-watch
¿Has probado esto?
watch: {
myProp: {
// the callback will be called immediately after the start of the observation
immediate: true,
handler (val, oldVal) {
// do your stuff
}
}
}
Debe comprender, la jerarquía de componentes que tiene y cómo está pasando los accesorios, definitivamente su caso es especial y los desarrolladores no suelen encontrarlo.
Componente principal -myProp-> Componente secundario -myProp-> Componente nieto
Si myProp se cambia en el componente principal, también se reflejará en el componente secundario.
Y si myProp se cambia en el componente hijo, también se reflejará en el componente nieto.
Entonces, si myProp se cambia en el componente principal , se reflejará en el componente nieto. (hasta ahora tan bueno).
Por lo tanto, en la jerarquía, no tiene que hacer nada, los accesorios serán inherentemente reactivos.
Ahora hablando de subir en jerarquía
Si myProp se cambia en el componente grandChild , no se reflejará en el componente secundario. Debe usar el modificador .sync en el elemento secundario y emitir un evento desde el componente grandChild.
Si myProp se cambia en el componente secundario , no se reflejará en el componente primario. Debe usar el modificador .sync en el elemento primario y emitir un evento desde el componente secundario.
Si myProp se cambia en el componente grandChild , no se reflejará en el componente principal (obviamente). Debe usar el modificador .sync secundario y emitir un evento desde el componente nieto, luego mirar el accesorio en el componente secundario y emitir un evento sobre el cambio que el componente principal está escuchando utilizando el modificador .sync.
Veamos un código para evitar confusiones.
Parent.vue
<template>
<div>
<child :myProp.sync="myProp"></child>
<input v-model="myProp"/>
<p>{{myProp}}</p>
</div>
</template>
<script>
import child from ''./Child.vue''
export default{
data(){
return{
myProp:"hello"
}
},
components:{
child
}
}
</script>
<style scoped>
</style>
Child.vue
<template>
<div> <grand-child :myProp.sync="myProp"></grand-child>
<p>{{myProp}}</p>
</div>
</template>
<script>
import grandChild from ''./Grandchild.vue''
export default{
components:{
grandChild
},
props:[''myProp''],
watch:{
''myProp''(){
this.$emit(''update:myProp'',this.myProp)
}
}
}
</script>
<style>
</style>
Grandchild.vue
<template>
<div><p>{{myProp}}</p>
<input v-model="myProp" @input="changed"/>
</div>
</template>
<script>
export default{
props:[''myProp''],
methods:{
changed(event){
this.$emit(''update:myProp'',this.myProp)
}
}
}
</script>
<style>
</style>
Pero después de esto no ayudarás a notar las advertencias de vue diciendo
''Evite mutar un accesorio directamente ya que el valor se sobrescribirá cada vez que el componente principal se vuelva a representar''.
Nuevamente, como mencioné anteriormente, la mayoría de los desarrolladores no encuentran este problema, porque es un anti patrón. Es por eso que recibes esta advertencia.
Pero para resolver su problema (de acuerdo con su diseño). Creo que tienes que hacer el trabajo anterior (piratear para ser honesto). Todavía te recomiendo que reconsideres tu diseño y que sea menos propenso a errores.
Espero que ayude.
La función de reloj debe colocarse en el componente secundario. No padre
No estoy seguro si lo ha resuelto (y si lo entiendo correctamente), pero esta es mi idea:
Si el padre recibe myProp, y desea que se lo pase al niño y lo vea en el niño, entonces el padre debe tener una copia de myProp (no de referencia).
Prueba esto:
new Vue({
el: ''#app'',
data: {
text: ''Hello''
},
components: {
''parent'': {
props: [''myProp''],
computed: {
myInnerProp() { return myProp.clone(); } //eg. myProp.slice() for array
}
},
''child'': {
props: [''myProp''],
watch: {
myProp(val, oldval) { now val will differ from oldval }
}
}
}
}
y en html:
<child :my-prop="myInnerProp"></child>
En realidad, debe tener mucho cuidado al trabajar en colecciones complejas en tales situaciones (pasando pocas veces)
Puede
watch
accesorios para ejecutar algún código al cambiar los accesorios:
new Vue({
el: ''#app'',
data: {
text: ''Hello''
},
components: {
''child'' : {
template: `<p>{{ myprop }}</p>`,
props: [''myprop''],
watch: {
myprop: function(newVal, oldVal) { // watch it
console.log(''Prop changed: '', newVal, '' | was: '', oldVal)
}
}
}
}
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<child :myprop="text"></child>
<button @click="text = ''Another text''">Change text</button>
</div>
Puede usar el modo reloj para detectar cambios:
Haz todo a nivel atómico. Por lo tanto, primero verifique si se llama o no al método de reloj consolando algo dentro. Una vez que se haya establecido que se está llamando ese reloj, destrúyalo con su lógica comercial.
watch: {
myProp: function() {
console.log(''Prop changed'')
}
}
Si myProp es un objeto, no se puede cambiar de la forma habitual. por lo tanto, el reloj nunca se activará. la razón por la cual myProp no se cambia es que solo configura algunas teclas de myProp en la mayoría de los casos. el myProp en sí sigue siendo el indicado. intente ver accesorios de myProp, como "myProp.a", debería funcionar.
Trabajo con una propiedad calculada como:
items:{
get(){
return this.resources;
},
set(v){
this.$emit("update:resources", v)
}
},
Los recursos son en este caso una propiedad:
props: [ ''resources'' ]
para el enlace bidireccional debe usar el modificador .sync
<child :myprop.sync="text"></child>
y debe usar la propiedad watch en el componente secundario para escuchar y actualizar cualquier cambio
props: [''myprop''],
watch: {
myprop: function(newVal, oldVal) { // watch it
console.log(''Prop changed: '', newVal, '' | was: '', oldVal)
}
}