Tengo dos componentes de contexto no relacionados que comparten lógica y plantilla de una manera que parece que uno está extendiendo al otro.
Imagine componentes Drop and Pick como este:
// pick.js import Vue from 'vue' import Component from 'vue-class-component' @Component export default class Pick extends Vue { template: '<p>{{name}}</p>', created() { console.log('Hello Pick'); } data: { name: 'pick', count: 0 }, methods: { add: function () { this.count++; } } } // drop.js import Vue from 'vue' import Component from 'vue-class-component' @Component export default class Drop extends Vue { template: '<p>{{name}}</p> <span v-if="isUserFriendly">Greetings!!!</span>', created() { console.log('Hello Drop'); } data: { name: 'drop', isUserFriendly: false, count: 0, drops: 0 }, methods: { add: function () { this.count++; this.drops++; }, remove: function () { this.count--; }, } }Intuitivamente, uno puede decir que Drop está extendiendo Pick mientras agrega alguna funcionalidad y modifica la plantilla. Esta parece ser una buena solución, pero luego pensé que para lograr esa plantilla de selección debería verse así:
<p>{{name}}</p> <span v-if="isUserFriendly">Greetings!!!</span>¿Recuerdas que dije componentes de contexto no relacionados ? Ahora Pick necesita saber acerca de isUserFriendly, lo cual es inaceptable y no creo que sea la solución correcta. Además, generará una sobrecarga en el futuro, ya que la herencia puede ser difícil de mantener (imagine más componentes para extender y lógica para compartir).
¿Cuál crees que será el mejor enfoque aquí? ¿Tal vez hay otra forma con la que no estoy familiarizado?
¡Gracias por la ayuda!
La composición de componentes es una forma común de hacer esto. El componente de eliminación contiene un superconjunto de funciones, es decir, el componente de selección debe permitir que se ajuste de una manera que permita la salida y el comportamiento deseados.
Para la relación padre-hijo, las piezas de datos se pasan como accesorios y eventos, y las piezas de vista se pasan como ranuras.
La lógica adicional permanece en el componente principal.
En el componente hijo ( Pick ):
<div> <p>{{name}}</p> <slot name="extraText"/> </div>y
add: function () { this.count++; this.$emit('add'); } En el componente padre ( Drop ):
<Pick @add="drops++"> <template v-slot:extraText> <span>Greetings!!!</span> </template> </Pick>