Vue.js/Vueクラス/継承

Vue.js/Vueクラス/継承

Vue クラスはそれを継承した新たなカスタマイズ版の Vue クラスを生成できる。 コンポーネントが委譲的な拡張なら、これは継承的拡張ということになる。

このように書くと、決まった template パラメータを最初から持っている Vue クラスが生成できる。

var HogeVue = Vue.extend({
    template: '<div>hoge</div>'
});

なので Vue クラス同様にこのように書ける

var vm = new HogeVue({
    el: '#app'
});

テンプレートはもう決まっているので el だけ指定してやると↑で決めた内容にすり替わる。

インスタンス化を簡略化したものがコンポーネントであるので、コンポーネントと組み合わせてこのように書ける

Vue.component("hogehoge", HogeVue);

これでテンプレートへのタグ埋め込みによって継承した Vue オブジェクトを生成できるようになる。

多段継承

継承したモノを継承することもできる

このようにできる。

var HogeVue = Vue.extend({
    template: '<div>hoge</div>'
});
var PiyoVue = HogeVue.extend({
    template: '<div>piyo</div>'
});

これもインスタンス化の場合と同じで、もととなった親のコンストラクタの内容を子が必要な分だけ上書きできる。 逆に上書きしなければそれは全部親から引き継がれる。

javascript/vuejs/vue_class/extend/start.txt · 最終更新: 2018-11-24 02:25 by ore