Por ejemplo, tengo un componente escrito en formato SFC:
// Parent.vue <template> <div> {{ txt }} </div> </template> <script> export default { name: 'ParentComponent', data() { return { txt: 'Hello, world! I\'m Parent' } }, methods: { sayHello() { console.log(this.txt); } } } </script>Y me gustaría reutilizar el componente anterior desde el cual puedo extender:
// Child.vue <template> <div> {{ txt }} </div> </template> <script> import ParentComponent from './Parent'; export default { name: 'ChildComponent', mixins: [ParentComponent], created() { this.sayHello(); // 'Hello, world! I'm Parent' } } </script>Mis preguntas:
data , methods , ... se integrarán en ChildComponent ya que ese es un comportamiento básico de Vue mixin. Pero, ¿qué pasa con la parte <template> ? ¿Cómo se integran las partes de marcado? ¿O se ignora para que la única parte <script> se fusione?1- Sí, es posible, pero usando la opción de extends en lugar de mixins :
<template> <div> {{ txt }} </div> </template> <script> import ParentComponent from './Parent'; export default { name: 'ChildComponent', extends: ParentComponent, created() { this.sayHello(); } } </script>2 - Esto hereda solo las opciones de componentes extendidos.