読者です 読者をやめる 読者になる 読者になる

Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

vue.jsその0007 イベントリスニングの開始と任意のタイミングでイベントを発生させる方法

参考にさせて頂いたページ

Instance Methods - vue.js

体で覚えるVue.js - インスタンスメンバ編 〜 JSおくのほそ道 #024 - Qiita

体で覚えるVue.js - ViewModel生成編 〜 JSおくのほそ道 #022 - Qiita

バージョン

Vue.js v0.11.5

サンプルソース

<div id="sample">
  <p v-on="click:hoge">click here</p>
</div>
<script src="../js/vue.min.js"></script>
<script>
  var vm = new Vue({
    el: '#sample',
    created: function() {
      console.log('fooイベントのリスニングを開始します。');
      this.$on('foo', function(x){
        //fooイベントが発生したときに実行される処理
        console.log(x);
      });
    },
    ready: function() {
      //readyのタイミングでfooイベントを発生させる
      this.$emit('foo', 'ready event');
    },
    methods: {
      hoge: function() {
        //v-on="click:hoge"によって、fooイベントを発生させる
        this.$emit('foo', 'click event');
      }
    }
  });
</script>

リスニングの開始とlifecycle

まずcreatedのタイミングで、fooイベントのリスニングを開始しています。
このときイベント名は任意のイベント名を付けます。

$on('イベント名',callback関数);

のように、リスニングの開始と、イベント発生時に実行する処理を書いています。

createの他にも、readyなど任意のlifecycleでリスニングを開始できます。

lifecycleについては、以下のページなど参考にさせて頂いてます。

体で覚えるVue.js - ViewModel生成編 〜 JSおくのほそ道 #022 - Qiita

lifecycleによってfooイベントを発生させる

readyはcreatedよりも後に実行されるlifecycleです。

this.$emit('foo', 'ready event');

でfooイベントが発生し、文字列'ready event'がcallback関数の引数xとして渡されています。

要素がclickされたタイミングでfooイベントを発生させる

v-on="click:hoge"

の要素をクリックすることによって、hogeメソッドを実行しています。

this.$emit('foo', 'click event');

でfooイベントが発生し、文字列'click event'がcallback関数の引数xとして渡されています。

Eventsに関するInstance Methods

  • $dispatch
  • $broadcast
  • $emit
  • $on
  • $once
  • $off

があるようです。

Instance Methods - vue.js

体で覚えるVue.js - インスタンスメンバ編 〜 JSおくのほそ道 #024 - Qiita

を参考にさせて頂きました。