vue.js 2.x その0006 refで要素を参照する

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

Vue.js

サンプルコード

以下のように書いてみました。

<div id="vue-app">
  <button v-on:click="clicked">click here</button>
  <div>
    <my-component ref="hogeElm" />
  </div>
  <div ref="fooElm">
    foo<br>foo
  </div>
</div>

<script src="js/vue.js"></script>
<script>
  new Vue({
    el: '#vue-app',
    data: {
    },
    components: {
      'my-component': {
        template: '<div><p ref="hogeChild">pタグ</p></div>',
      },
    },
    mounted: function(){
      console.log('mounted');
      // hogeElmの高さを取得します
      console.log(this.$refs.hogeElm.$el.clientHeight);
      // componentsの中にあるタグの高さを取得します
      console.log(this.$refs.hogeElm.$refs.hogeChild.clientHeight);
      // componentsにしていない要素ももちろん参照できます
      console.log(this.$refs.fooElm.clientHeight);
    },
    methods: {
      clicked: function(){
        // クリックイベントで要素を参照します
        console.log(this.$refs.fooElm.clientHeight);
      }
    }
  });
</script>

サンプルコードについて

createdではまだ参照できませんが、mountedではthis.$refsから参照できるようになります。