vue2 子组件hover时传值给父组件 移出hover时 调用父组件另一个方法

在Vue2中，子组件向父组件传递值可以通过自定义事件来实现。当子组件hover时，可以通过$emit方法触发一个自定义事件，并将需要传递的值作为参数传递给父组件。当移出hover时，可以调用父组件的另一个方法。

下面是一个示例代码：

在子组件中，可以使用`@mouseover`和`@mouseout`监听鼠标的hover事件，并通过`$emit`方法触发自定义事件：

<template>
  <div @mouseover="handleHoverIn" @mouseout="handleHoverOut">子组件</div>
</template>

<script>
export default {
  methods: {
    handleHoverIn() {
      this.$emit('hover-in', '传递的值');
    },
    handleHoverOut() {
      this.$emit('hover-out');
    }
  }
}
</script>

在父组件中，可以使用`@hover-in`和`@hover-out`监听子组件触发的自定义事件，并在对应的方法中处理传递的值和调用另一个方法：

<template>
  <div>
    <p>父组件接收的值：{{ value }}</p>
    <child-component @hover-in="handleHoverIn" @hover-out="handleHoverOut"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      value: ''
    }
  },
  methods: {
    handleHoverIn(value) {
      this.value = value;
    },
    handleHoverOut() {
      // 调用父组件的另一个方法
      this.anotherMethod();
    },
    anotherMethod() {
      // 父组件的另一个方法的逻辑
    }
  }
}
</script>

在上述示例中，子组件通过`$emit`方法触发了两个自定义事件`hover-in`和`hover-out`，并将需要传递的值作为参数传递给父组件。父组件通过`@hover-in`和`@hover-out`监听这两个自定义事件，并在对应的方法中处理传递的值和调用另一个方法。