Vue.js イベント バインディング - 組み込みイベント バインディング、カスタム イベント バインディング

今回は、Vue.js の event バインディング - 組み込みイベント バインディング、カスタム イベント バインディング、Vue.js を使用したイベント バインディング - 組み込みイベント バインディング、カスタム イベント バインディングについて説明します。実際の事例をご紹介しますので、見てみましょう。

<button v-on:click="toggle">切换</button>

は、

<button @click="toggle">切换</button>

と省略できます

<button @click.stop="toggle">切换</button>

組み込みのイベントバインディング

バブリングイベントを防止

<input type="text" @keydown="onkeydown">......<script>
  export default {    methods: {
      onkeydown () {        console.log(&#39;on key down&#39;)
      }
    }
  }</script>

よく使用されるイベントModifier:keydown

@keydown入力ボックスの入力内容または内容の変更が実行をトリガーします

<input @keydown.enter="onkeydown">//这两个效果一样<input @keydown.13="onkeydown">......<script>
  export default {    methods: {
      onkeydown () {        console.log(&#39;on key down&#39;)
      }
    }
  }</script>

Pass指定キーボードの Enter キーが押されたときに実行をトリガーする修飾子 @keydown.enter
同じ効果を得るために @keydown.13; などのキーコードを使用することもできます

<template>
  <div class="hello">
    {{ hello }}    <button @click="emitMyEvent">emit</button>
  </div></template><script>
  export default {
    data () {      return {        hello: &#39;I am componnet a&#39;
      }
    },    methods: {
      emitMyEvent () {//        触发自定义事件 my-event 并传递一个参数 this.hello
        this.$emit(&#39;my-event&#39;, this.hello)
      }
    }
  }</script>

カスタム イベント バインディング

カスタム イベント バインディングは通常 On で使用されますカスタム コンポーネント a.vue のコードは次のとおりです

<template>
  <div id="myapp">
    <!--在父组件中监听了 comA 的 my-event 事件 当触发的时候 我们执行了 onComaMyEvent -->
    <comA @my-event="onComaMyEvent"></comA>
  </div></template><script>
  import comA from &#39;./components/a.vue&#39;
  export default {    components: {comA},    methods: {//      parmfromA为传递过来的参数
      onComaMyEvent (parmfromA) {        console.log(parmfromA)
      }
    }
  }</script>

呼び出されるコンポーネント内では
rrreee

この記事のケースを読んだ後は、メソッドを習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 PHP中国語ウェブサイト！

推奨読書:

Vue.jsのリストデータの同期更新メソッド

Vue.jsのリストレンダリングv-for配列オブジェクトサブコンポーネント

Vue.jsでのテキストレンダリング

Vue.jsを使用する際の注意点は何ですか

以上がVue.js イベント バインディング - 組み込みイベント バインディング、カスタム イベント バインディングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。