在发出时返回 PointerEvent 对象而不是子数据

Posted 2023-02-16

【中文标题】在发出时返回 PointerEvent 对象而不是子数据

【英文标题】：PointerEvent object being returned instead of child data on emit

【发布时间】：2021-11-07 03:38:50

【问题描述】：

我正在创建一个 vue 组件库。我已经构建了一个按钮组件，其中包含其宽度和左侧位置的数据。我试图在单击时将该数据发送到父级（选项卡组件）。我已经解决了很多问题，并且已经缩小了大部分问题的范围。我的子组件（按钮）正在发出正确的东西，但看起来父组件（选项卡）正在接收 click/pointerevent 对象的值，而不是在发出时传递的数据。我确定这是我的父点击句柄方法中的一些问题，但无法确定到底是什么。我已经为组件及其点击处理程序方法包含了代码 sn-ps。

这已被缩减，但本质上，我想在单击子/按钮时将子按钮的宽度（以及最终的左侧位置）发送到父选项卡。我想将发射的宽度/左侧位置分配给滑块，以便在单击选项卡中的按钮时移动一些反应性下划线。我在 click 事件上构建了一个控制台日志语句，该语句返回子级发出的值，然后返回父级接收到的值。现在，当单击按钮时，子级正在发出正确的值，但父级正在接收并尝试分配一个 PointerEvent 对象。感谢您的任何反馈！

子（按钮）模板和相关脚本：

<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>

父（标签）模板和相关脚本：

<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>

【参考方案1】：

我看不出你的代码有任何问题，只是你没有在父组件中使用Button 组件。相反，您使用的是div。这可以解释为什么您会收到PointerEvent。如果您没有明确传递任何内容，则此事件将作为第一个参数传递给事件。

这里有一个演示：https://stackblitz.com/edit/vue-opruyd?file=src%2FApp.vue

【讨论】：

哦，它是默认值是有道理的。在使用中，我将 放在 中的插槽位置，当它进入我的应用程序时。出于这个原因，我将侦听器附加到父 div。这可能就是我得到 Pointerevent 对象的原因。我这样做是因为我相信该插槽不能附加侦听器。是否有解决方法实施？谢谢你的来信！

我不确定我是否正确理解了这个问题。我已经更新了堆栈闪电战。你不能这样吗？

是的，这就是我希望它工作的方式（正如您在 stackblitz 中所说明的那样）。但是，在我的实现中，我的 App.vue 被设置为另一个组件 包裹在我的 组件周围。 占用一个插槽（您可以将 传递到其中）。但是目前我的 只是返回指针事件，因为它被放置在 组件中的父容器上，而不是在渲染中按钮将通过的插槽/位置？这更有意义吗？

<Tabs> <Button> <Button> </Tabs>