質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

1回答

440閲覧

Vue.js:非SPAのインスタンス間で、関数を共有したい

tara-tail

総合スコア32

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2019/04/17 09:35

編集2019/04/17 09:39

概要

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})

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

ミックスインを使うのはどうでしょうか。

投稿2019/04/17 11:39

wtokuno

総合スコア448

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tara-tail

2019/04/18 01:04

wtokunoさん、ありがとうございます。ミックスインを使用することにより、今回の問題を解決することができました。 今回の例はあまり良くなかったかもしれませんが、以下に変更した概要を記載しておきます。 1) component.js にミックスイン「var mixin」で「showConsole」メソッドを登録する。 2) 各Vueインスタンスに、mixins: [mixin]を追加する。 これで、Vueインスタンス共通で使用したいメソッドなどを「var mixin」に追加していけば、どのページ(Vueインスタンス)でも使用できることを理解できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問