Vuejsは変数と関数を共有する複数のコンポーネントを持っています

Question

これは実践の詳細ですが、私は実際に動作するシナリオを持っていませんが、私は例を挙げることができます。 Facebookのメッセンジャーを想像してみてください。ヘッダにチャットウィジェットがあり、メッセージをすばやく表示して返信することができます。また、[すべて表示]をクリックすると、メッセージページに移動できます。

私には2つのVueコンポーネントがあることがわかります。親コンポーネントと子コンポーネントは、すべてのページとメッセージページで使用されるため、より兄弟です。今

<chat></chat> and <chat-widget></chat-widget> 

私が見ることができるものから、ウィジェットとチャットウィンドウ自体渡って同じように動作する機能は、おそらく彼らはストレートのためにそれらがロードされている場所で、わずかに異なるテンプレートを持っていますが、代よさバットは次のようになります。私は私のVueのフロントエンドと私のバックエンド（データベース）との間に要求を送信するためにaxiosを使用することになり、私のバックエンドとしてLaravelを使用するよう

messages() {} 
compose() {} 
validate() {} 

これらはほんの一部の例です。

理想的には、これらのコンポーネントの機能を複製したくないので、単にそれらを複製するか、何らかの親関数を保存する方法がありますか？

1つの問題は、非同期のajaxリクエストのためです。私が単にバインドするメッセージを返す関数を呼び出すことはできません。少なくとも、私はできないと思います。

コンポーネント内で同じ機能を複製していないように、Vueでこれを最もうまくやる方法についてのガイダンスを探してください。

Answer 1

あなたは、他のコンポーネントが拡張することができ、そこから、「ベース/アブストラクト」コンポーネントを作成するために組成物を使用することができます。

https://vuejs.org/v2/api/#extends

var CompA = { ... } 
// extend CompA without having to call `Vue.extend` on either 
var CompB = { 
    extends: CompA, 
    ... 
} 

をあなたは「ベース/抽象」クラスから機能を継承することができ、または親の機能の一部を無効にする。あなたができる

もう一つは、ミックスインを作成することです：

https://vuejs.org/v2/guide/mixins.html#ad

あなたのコンポーネントが機能を共有する必要がありますが、大部分は同じではありません場合、これは便利です。そのような場合にextendを使用する場合は、その場合には基本機能の大部分を上書きする方がよいでしょう。

もちろん、一般的に使用されているメソッドを別のファイルに抽出してコンポーネントに直接インポートすることはできません。