Прослушивание события мыши вручную в экземпляре Vue

Question

Я пытаюсь прослушать событие мыши в дочернем компоненте компонента, но событие не запускается.Это работает, когда я слушаю событие в html, но не

Это работает, как вы можете видеть:

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#mouse',
  data: {
    message: 'Hover Me!'
  },
  methods: {
    mouseover: function() {
      this.message = 'Good!'
    },
    mouseleave: function() {
      this.message = 'Hover Me!'
    }
  }
});

body {
  background: #333;
}

body #mouse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 280px;
  height: 50px;
  margin: 0 auto;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: #007db9;
}

body #mouse a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="mouse">
  <a @mouseover="mouseover" @mouseleave="mouseleave">
    {{message}}
  </a>
</div>

Это не работает, потому что прослушивание события выполняется в коде.

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#mouse',
  data: {
    message: 'Hover Me!'
  },
  methods: {
    mouseover: function() {
      this.message = 'Good!'
    },
    mouseleave: function() {
      this.message = 'Hover Me!'
    },
    mounted() {
      this.$on('mouseleave', this.mouseleave);
    }
  }
});

body {
  background: #333;
}

body #mouse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 280px;
  height: 50px;
  margin: 0 auto;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: #007db9;
}

body #mouse a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="mouse">
  <a @mouseover="mouseover">
    {{message}}
  </a>
</div>

Как правильно вручную прослушивать событие mouseleave от самого компонента, а не из HTML?

Answer 1

Во втором фрагменте хук-функция mounted должна быть за пределами методов, это не решит проблему , а функция vm.$on используется для пользовательских событий, а не для собственных событий, таких как clickи mouseleave, как объяснено here:

, если вы позвоните по этому номеру:

 vm.$on('test', function (msg) {
    console.log(msg)
  })

У вас должен быть где-то такой код:

 vm.$emit('test', 'hi')

Поскольку вы не можете использовать метод this.$on, я рекомендую вам следующее решение, используя ref, добавив атрибут ref к элементу a, указавlink или что вы хотите, и в смонтированном крюке добавьте следующий код:

    this.$refs.link.addEventListener('mouseleave', () => {
      this.mouseleave()
    }, false);

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#mouse',
  data: {
    message: 'Hover Me!'
  },
  methods: {
    mouseover: function() {
      this.message = 'Good!'
    },
    mouseleave: function() {
      this.message = 'Hover Me!'
    }
  },
  mounted() {
    this.$refs.link.addEventListener('mouseleave', () => {
      this.mouseleave()
    }, false);

  }
});

body {
  background: #333;
}

body #mouse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 280px;
  height: 50px;
  margin: 0 auto;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: #007db9;
}

body #mouse a {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div id="mouse">
  <a @mouseover="mouseover" ref="link">
    {{message}}
  </a>
</div>