web-dev-qa-db-ja.com

Vue v-on：クリックはコンポーネントに働きません

コンポーネント内でon clickディレクティブを使用しようとしていますが、うまくいかないようです。コンポーネントをクリックすると、コンソールで「テストクリック」が表示されるはずです。コンソールにエラーが表示されないので、何が間違っているのかわかりません。

index.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>

App.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>

Test.vue（コンポーネント）

<template>
  <div>
    click here
  </div>
</template>

<script>
export default {
  name: 'test',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
javascriptvue-componentvuejs2vue.js
107
Javier Cárdenas

コンポーネントのルート要素でネイティブイベントを監視したい場合は、次のようにv-onに 。native 修飾子を使用する必要があります。

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

あるいは、コメントで示唆されているように、手短に言えば、次のようにすることもできます。

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

$emit関数は私があなたが求めていると思うもののためによりよく機能すると思います。コンポーネントはVueインスタンスから分離されているので、多くの状況で再利用できます。

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

HTMLで使用する

<test @test-click="testFunction">
13
Jim McNeely

それは @ Nepsの答え ですが詳細があります。

注： @ Saurabhの答え は、コンポーネントを変更したくない場合や、したくない場合に適しています。アクセスできません。

@clickがなぜうまくいかないのですか？

コンポーネントは複雑です。 1つのコンポーネントは小さな派手なボタンラッパーにすることができ、もう1つのコンポーネントはたくさんのロジックを含むテーブル全体にすることができます。 Vueはv-modelをバインドしたりv-onを使用したりするときにあなたが何を期待しているのか正確には知りませんので、それらすべてはコンポーネントの作成者によって処理されるべきです。

クリックイベントの処理方法

Vue docs によると、$emitはイベントを親に渡します。 docsからの例：

メインファイル

<blog-post
  @enlarge-text="onEnlargeText"
/>

コンポーネント

<button @click="$emit('enlarge-text')">
  Enlarge text
</button>

（@はv-onの省略形 です）

コンポーネントはネイティブのclickイベントを処理し、親の@enlarge-text="..."を発行します

ネイティブのクリックイベントを処理しているように見せるために、enlarge-textをclickに置き換えることができます。

<blog-post
  @click="onEnlargeText"
></blog-post>

<button @click="$emit('click')">
  Enlarge text
</button>

しかしそれだけではありません。 $emitはイベントと共に特定の値を渡すことを可能にします。ネイティブのclickの場合、値は MouseEvent です（Vueとは無関係のJSイベント）。

Vueはそのイベントを$event変数に格納します。ですから、ネイティブのイベント使用法の印象を与えるために、イベントと共に$eventを発行するのが最善です。

<button v-on:click="$emit('click', $event)">
  Enlarge text
</button>
5
OddMorning

少し冗長ですが、これが私のやり方です。

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

5
Neps

コンポーネントのネイティブイベントは、親要素から直接アクセスすることはできません。代わりにv-on:click.native="testFunction"を試すか、Testコンポーネントからイベントを発行することもできます。 v-on:click="$emit('click')"のように。

4
user4846835