vue 子组件通过鼠标移动事件修改父组件的宽度

可以通过在子组件中绑定鼠标移动事件，然后通过 $emit 方法向父组件传递修改后的宽度值，再在父组件中监听该事件并更新宽度即可。具体实现可以参考以下代码：

子组件：

<template>
  <div class="child" @mousemove="handleMouseMove"></div>
</template>

<script>
export default {
  methods: {
    handleMouseMove(event) {
      const width = event.clientX
      this.$emit('updateWidth', width)
    }
  }
}
</script>

父组件：

<template>
  <div class="parent" :style="{ width: parentWidth + 'px' }">
    <Child @updateWidth="handleUpdateWidth" />
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      parentWidth: 200
    }
  },
  methods: {
    handleUpdateWidth(width) {
      this.parentWidth = width
    }
  }
}
</script>

这样，当鼠标在子组件上移动时，父组件的宽度就会随之改变。