参考にさせて頂いたページ
http://vuejs.org/api/instance-methods.html#Events
体で覚える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
があるようです。
http://vuejs.org/api/instance-methods.html#Events
や
体で覚えるVue.js - インスタンスメンバ編 〜 JSおくのほそ道 #024 - Qiita
を参考にさせて頂きました。