Estoy trabajando en la creación de una biblioteca de componentes vue. He creado un componente de botón que tiene datos de su ancho y posición izquierda. Estoy tratando de emitir esos datos al padre (un componente de pestañas) cuando se hace clic en él. He solucionado bastantes problemas y he reducido la mayor parte del problema. Mi componente secundario (botón) está emitiendo lo correcto, pero parece que el componente principal (pestañas) está recibiendo el valor del objeto click/pointerevent en lugar de los datos pasados en la emisión. Estoy seguro de que se trata de un problema en mi método principal de manejo de clics, pero no puedo determinar exactamente qué. He incluido fragmentos de código para los componentes y sus métodos de manejo de clics.

Esto está reducido, pero esencialmente, quiero emitir el ancho (y eventualmente la posición izquierda) del botón secundario a la pestaña principal al hacer clic en el botón secundario. Quiero asignar esa posición de ancho/izquierda emitida al control deslizante para mover un subrayado reactivo cada vez que se hace clic en un botón en las pestañas. Incorporé una declaración de registro de la consola en el evento de clic que devuelve el valor emitido por el elemento secundario y luego devuelve el valor recibido del elemento principal. En este momento, el elemento secundario emite el valor correcto cuando se hace clic en el botón, pero el elemento principal recibe e intenta asignar un objeto PointerEvent. ¡Gracias por cualquier comentario!

Plantilla secundaria (botón) y script relevante:

 <template> <div class="button @click="click" ref="button"> <slot /> </div> </template> <script> import { ref } from 'vue' export default { name: 'Button', emits: [ 'click' ], data () { return { width: '', left: '' } }, setup() { const button = ref(null) return { button } }, mounted () { this.$nextTick(() => { this.left = Math.ceil(this.button.getBoundingClientRect().left) this.width = Math.ceil(this.button.getBoundingClientRect().width) }) }, methods: { click () { this.$emit('click', this.width) console.log(`${this.width} has been emitted to the tabs component`) } } } </script>

Plantilla principal (pestaña) y secuencia de comandos relevante:

 <template> <div class="tabs" @click="updateSliderWidth"> slot </div> <div class="slider" :style="sliderWidth"> </template> <script> import Button from './Button.vue' export default { name: 'Tabs', components: { Button }, methods: { updateSliderWidth (value) { this.sliderWidth = value console.log(`${value} has been received and assigned by parent`) } }, data () { return { sliderWidth: '' } } } </script>