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

Question

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>

597 4

javascript vue-component vue.js

4 ответов:

Comments

Ничего не найдено.

Saurabh · Accepted Answer · 2017-04-17 07:00:07

Если вы хотите прослушать собственное событие на корневом элементе компонента, вы должны использовать .уроженца модификатор для 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>

Jim McNeely · Accepted Answer · 2017-12-02 09:22:54

Я думаю $emit функция работает лучше для того, что я думаю, что вы просите. Он сохраняет ваш компонент отдельно от экземпляра Vue, так что он может быть повторно использован во многих контекстах.
<template>
  <div id="app">
    <test @click="$emit('test-click')></test>
  </div>
</template>
используйте его в HTML
<test @test-click="testFunction">

score 2 · Accepted Answer · 2018-06-04 23:42:12

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

Neps · Accepted Answer · 2018-06-22 23:46:02

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

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