vue.js 0.11.x その0012 インスタンスの親子関係 $parent

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

バージョン

Vue.js v0.11.5

サンプルソース

にならって、以下のような記述によって親子関係を定義できる。

<script src="../js/vue.min.js"></script>
<script>
  var parent = new Vue({
    'data': {
      a: 100
    }
  });
  var child = parent.$addChild({
    inherit: true,//親のプロパティを継承するかしないか
    data: {
      b: 200
    }
  });
  console.log(child.$parent.a); // 100
  console.log(child.a); // trueなので100 // falseならundefined
  console.log(child.b); // 200
  child.a = 500;
  console.log(child.$parent.a); // trueなので500 // falseなら100
</script>

inherit: trueの場合はchild.aに対する変更が親のプロパティにも影響を与える。

サンプルソース(Lifecycleでthis.$parentを設定する方法をやってみた)

これだと親のプロパティは子に継承されないけど、一応親子関係は定義できるみたい。

<script src="../js/vue.min.js"></script>
<script>
  var parent = new Vue({
    data: {
      a: 100,
    }
  });
  var child = new Vue({
    data: {
      b: 200,
    },
    created : function(){
      this.$parent = parent;
    }
  });
  console.log(child.$parent.a); // 100
  console.log(child.a); // undefined
  console.log(child.b); // 200
  child.a = 500;
  console.log(child.$parent.a); // 100
</script>

サンプルソース(newするときにoptionにparentインスタンスを渡してみる)

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

のページを参考に

<script src="../js/vue.min.js"></script>
<script>
  var parent = new Vue({
    data: {
      foo: {
        x: 100,
      }
    }
  });
  var child = new Vue({
    parent: parent
  });
  console.log(child.$parent.foo.x);  // undefined
</script>

をやってみたら、child.$options.parent.foo.xに値が入るような構造になり、child.$parentがundefinedという結果になった。

v0.11になったときに変更されたということなのかな。

これはこれで、child.$options.parentを使う方法でも色々実装する上で問題ないのかな？あるのかな？

サンプルソース(componentsから見ると.this.$parent)

<div id="sample">
  <hoge-hoge></hoge-hoge>
  <foo-foo></foo-foo>
</div>

<script src="../js/vue.min.js"></script>
<script>
  var parent = new Vue({
    el: '#sample',
    data: {
      aaa: 'parentDataHoge',
      bbb: 'parentDataFoo',
    },
    components: {
      "hoge-hoge": {
        template: '<p>HogeHogeElement</p>',
        replace: true,
        ready: function(){
          console.log(this.$parent.aaa);//parentDataHoge
          console.log(this.$el);//<p>HogeHogeElement</p>
          console.log(this.$el.innerText);//HogeHogeElement
          console.log(this.$el.clientWidth);//$elの幅
          console.log(this.$el.offsetTop);//$elのy座標
        }
      },
      "foo-foo": {
        template: '<p>FooFooElement</p>',
        replace: true,
        compiled: function(){
          console.log(this.$parent.bbb);
          console.log(this.$el);//<p>FooFooElement</p>
        }
      },
    }
  });
  console.log(parent._children[0]);
  console.log(parent._children[1]);
  console.log(parent._children[0].$parent);//n
  console.log(parent._children[0].$parent.aaa);//parentDataHoge
  console.log(parent._children[0].$el);//<p>HogeHogeElement</p>
  console.log(parent._children[0].$el.innerText);//HogeHogeElement
  console.log(parent._children[0].$el.clientWidth);//$elの幅
  console.log(parent._children[0].$el.offsetTop);//$elのy座標
</script>

上記のようにすると

  console.log(parent._children[0]);
  console.log(parent._children[1]);

にそれぞれcomponentsの各要素が格納されており、parent._children[0]という親子関係になっている。

newするときに渡したcomponents内部から見ると、this.$parentで親にアクセス出来るし、親子関係になっているのがわかる。

インスタンスからは、要素の幅や高さ、オフセットなど色々なプロパティにアクセスできる。

今回はここまで。

Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。