vue.js 0.11.x その0009 Vue.component()で登録したcomponentにparamAttributesで属性を付与する

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

http://vuejs.org/api/options.html#paramAttributes

バージョン

Vue.js v0.11.5

サンプルソース(属性を適用する)

例えば<hoge-hoge class="aaaaa" hoge="bbbbb"></hoge-hoge>みたいな感じで普通に属性を付ければ付く

<div id="sample">
  <hoge-hoge class="aaaaa" hoge="bbbbb"></hoge-hoge>
  <p v-component="hoge-hoge" class="ccccc" hoge="ddddd"></p>
</div>

<script src="../js/vue.min.js"></script>
<script>
  Vue.component('hoge-hoge', {
    template: '<p>hoge-hoge-element</p>',
    replace: true
  });
  var vm = new Vue({
    el: '#sample'
  });
</script>

サンプルソース(属性に渡した値をVueオブジェクト内で使う)

<div id="sample">
  <hoge-hoge class="aaaaa" hoge="bbbbb"></hoge-hoge>
  <p v-component="hoge-hoge" class="ccccc" hoge="ddddd"></p>
</div>

<script src="../js/vue.min.js"></script>
<script>
  Vue.component('hoge-hoge', {
    template: '<p>hoge-hoge-element</p>',
    replace: true,
    paramAttributes: ['class', 'hoge'],
    compiled: function () {
      console.log(this.class);
      console.log(this.hoge);
    }
  });
  var vm = new Vue({
    el: '#sample'
  });
</script>

例えば上記のようにすると、
コンソールには

aaaaa
bbbbb
ccccc
ddddd

とclassとhogeに渡した値がそれぞれ出力される。

サンプルソース(templateプロパティにアクセスする)

<div id="sample">
  <hoge-hoge class="aaaaa" hoge="bbbbb"></hoge-hoge>
  <p v-component="hoge-hoge" class="ccccc" hoge="ddddd"></p>
</div>

<script src="../js/vue.min.js"></script>
<script>
  Vue.component('hoge-hoge', {
    template: '<p>hoge-hoge-element</p>',
    replace: true,
    paramAttributes: ['class', 'hoge'],
    compiled: function () {
      console.log(this.class);
      console.log(this.hoge);
      console.log(this.$options.template);
    }
  });
  var vm = new Vue({
    el: '#sample'
  });
</script>