概要
Vue.jsの学習をしています。タイトルのとおり、VuexやRouterを使用しない複数のHTMLファイルで画面が遷移するサイトを作成しています。
現在、HTMLファイルごとにVueインスタンス(new Vue)を作成してページを作成しているのですが、それぞれのページで同じ機能(カスタム要素で作成)を実装しており、その関数を各ページのVueインスタンス内に記載しています。
カスタム要素(btn-page)は、グローバルコンポーネントで作成して各ページで共有することができました。
質問
各ページのインスタンス内に同じ関数(カスタム要素から参照する関数)を書くのは効率的でないと考えていますが、この関数を一度だけどこかに記載して、それを共有することは可能でしょうか?
なお、コードは少し簡略して記載していますので、ご了承ください。
html
1<!--1ページ目--> 2<div id="page1"> 3 <!--「component.js」で「btn-page」というコンポーネントを定義--> 4 <btn-page v-on:parent="showConsole">click</btn-page> 5</div> 6 7<script src="component.js"></script> 8<script> 9new Vue({ 10 el: '#page1', 11 methods: { 12 showConsole: function() { 13 console.log('click!'); 14 } 15 } 16 } 17}) 18</script>
html
1<!--2ページ目--> 2<div id="page2"> 3 <!--「component.js」で「btn-page」というコンポーネントを定義--> 4 <btn-page v-on:parent="showConsole">click</btn-page> 5</div> 6 7<script src="component.js"></script> 8<script> 9new Vue({ 10 el: '#page2', 11 methods: { 12 <!--#page1と同じ関数を記載--> 13 showConsole: function() { 14 console.log('click!'); 15 } 16 } 17 } 18}) 19</script>
JavaScript
1// component.js 2Vue.component('btn-page', { 3 template: '<div class="btn" @click="childFunc"></div>', 4 methods: { 5 childFunc: function() { 6 this.$emit('parent') 7 } 8 } 9})
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/04/18 01:04