Vue v-on: щелчок не работает на компоненте


Я пытаюсь использовать директиву on click внутри компонента, но она, похоже, не работает. Когда я нажимаю на компонент, ничего не происходит, когда я должен получить "тестовый щелчок" в консоли. Я не вижу никаких ошибок в консоли, поэтому я не знаю, что я делаю неправильно.

.HTML-код

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>vuetest</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

приложение.vue

<template>
  <div id="app">
    <test v-on:click="testFunction"></test>
  </div>
</template>

<script>
import Test from './components/Test'

export default {
  name: 'app',
  methods: {
    testFunction: function (event) {
      console.log('test clicked')
    }
  },
  components: {
    Test
  }
}
</script>

4   51   2017-01-05 03:27:47

4 ответа:

Если вы хотите прослушать собственное событие на корневом элементе компонента, вы должны использовать .уроженца модификатор для v-on, Как следующие:

<template>
  <div id="app">
    <test v-on:click.native="testFunction"></test>
  </div>
</template>

или в сокращенном виде, как предлагается в комментарии, вы также можете сделать:

<template>
  <div id="app">
    <test @click.native="testFunction"></test>
  </div>
</template>

Я думаю $emit функция работает лучше для того, что я думаю, что вы просите. Он сохраняет ваш компонент отдельно от экземпляра Vue, так что он может быть повторно использован во многих контекстах.

<template>
  <div id="app">
    <test @click="$emit('test-click')></test>
  </div>
</template>

используйте его в HTML

<test @test-click="testFunction">

собственные события компонентов не доступны напрямую из родительских элементов. Вместо этого вы должны попробовать v-on:click.native="testFunction", или вы можете выдать событие из Test составляющей. Как v-on:click="$emit('click')".

немного многословно, но вот как я это делаю:

@click="$emit('click', $event)"