vue.js 0.11.x その0013 兄弟にあたるオブジェクトが発したイベントをリスニングする(兄弟にイベントを伝搬する)$broadcast

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

http://vuejs.org/api/instance-methods.html

バージョン

Vue.js v0.11.5

参考にした過去記事と$broadcast

vue.jsその0012 インスタンスの親子関係 $parent - Motomichi Works Blogで$parentとか_children[0]とか_children[1]について書きました。

vue.jsその0007 イベントリスニングの開始と任意のタイミングでイベントを発生させる方法 - Motomichi Works Blogでは親子関係は作成しない状態で、イベントリスニングについて書きました。

これらとthis.$parent.$broadcast('foo', 'args');を使って$parent経由でイベントを伝搬しています。

サンプルソース(children[0]が発したfooイベントを、children[1]に伝搬する)

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

終わりに

親子関係を学習して、イベントリスニングについて学習したことで、ちょっと組み合わせてみました。

this.$parent.$broadcast(‘イベント名’,引数)を使って、親経由でfooイベントを伝搬しています。

今回はここまで。