En Vue 2.0, la documentación yotros indican claramente que la comunicación entre padres e hijos se produce a través de accesorios.
¿Cómo le dice un padre a su hijo que ha ocurrido un evento a través de accesorios?
¿Debería ver un evento llamado prop? Eso no se siente bien, ni tampoco las alternativas ( $emit / $on es para niño a padre, y un modelo central es para elementos distantes).
Tengo un contenedor principal y necesita decirle a su contenedor secundario que está bien realizar ciertas acciones en una API. Necesito poder activar funciones.
Asigne una ref al componente secundario y use $refs para llamar directamente a un método en el componente secundario.
html:
<div id="app"> <child-component ref="childComponent"></child-component> <button @click="click">Click</button> </div>JavaScript:
var ChildComponent = { template: '<div>{{value}}</div>', data: function () { return { value: 0 }; }, methods: { setValue: function(value) { this.value = value; } } } new Vue({ el: '#app', components: { 'child-component': ChildComponent }, methods: { click: function() { this.$refs.childComponent.setValue(2.0); } } })Para obtener más información, consulte la documentación de Vue en referencias .
Lo que estás describiendo es un cambio de estado en el padre. Le pasas eso al niño a través de un accesorio. Como sugeriste, watch esa utilería. Cuando el hijo realiza una acción, notifica al padre a través de un emit , y el padre puede cambiar el estado nuevamente.
var Child = { template: '<div>{{counter}}</div>', props: ['canI'], data: function () { return { counter: 0 }; }, watch: { canI: function () { if (this.canI) { ++this.counter; this.$emit('increment'); } } } } new Vue({ el: '#app', components: { 'my-component': Child }, data: { childState: false }, methods: { permitChild: function () { this.childState = true; }, lockChild: function () { this.childState = false; } } }) <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"></script> <div id="app"> <my-component :can-I="childState" v-on:increment="lockChild"></my-component> <button @click="permitChild">Go</button> </div>Si realmente desea pasar eventos a un niño, puede hacerlo creando un bus (que es solo una instancia de Vue) y pasándoselo al niño como accesorio .
Puede usar $emit y $on . Usando el código @RoyJ:
html:
<div id="app"> <my-component></my-component> <button @click="click">Click</button> </div>JavaScript:
var Child = { template: '<div>{{value}}</div>', data: function () { return { value: 0 }; }, methods: { setValue: function(value) { this.value = value; } }, created: function() { this.$parent.$on('update', this.setValue); } } new Vue({ el: '#app', components: { 'my-component': Child }, methods: { click: function() { this.$emit('update', 7); } } })Ejemplo de ejecución: https://jsfiddle.net/rjurado/m2spy60r/1/