Vue.js 単一ファイルコンポーネントと通常使用の併用
通常使用とは何なのかというと、HTMLのscriptタグ内で、new Vue() してやること…ということにします。
単一ファイルコンポーネントは使いたい。
でも、他のHTML要素の方も、Vue.jsで制御したい。
その場合、どうすればいいか、調べてもよく分からなった。
例えば、ボタンを押した時にアラートメッセージを出す…等の小さい制御も、Vue.jsで書きたい。
でもそれは、単一ファイルコンポーネントにする程ではない。
かと言って、大きめの動的な要素は、単一ファイルコンポーネントを使いたい。
そこで、以下の方法でやることにした。
main.js
Webpack等でバンドルする際のエントリーポイント。
Vue.extend()は、再利用可能なコンストラクタを生成するらしい。
components や data をVueコンストラクタに登録しつつも、新たなコンストラクタを作る。
それを、global.Vue …要はグローバル変数に入れてやる。
これで、各HTMLファイルから、new Vue() してやることが出来る。
global.Vue = Vue.extend({ components: { menulist: Menu, detail: Detail, }, data () { return { foo: 'foo' } }, router, })
以下、HTMLファイル。
Vueコンストラクタからインスタンスを生成している。
<div id="app"> <div>{{ foo }}</div> <div>{{ bar }}</div> </div> <script src="bundle.js"></script> <script> new Vue({ el: '#app', data: { bar: 'bar', }, }) </script>
Webアプリ共通の設定 → エントリーポイントで登録
各HTMLページ毎の設定 → scriptタグ内で登録
という感じで作ってやる。今のところこれが一番スッキリしてると思う。