複数の重い同じVueJSコンポーネントをページ上で使用する適切な方法は何ですか？

VueJSコンポーネントとしてカスタム入力を作成しようとしています。フィールドとボタンは<input type="text">になります。このコンポーネントは、このような動作を実装する必要があります。オートコンプリートでテキストを入力するか、ボタンを押してデータベースのレコードとモーダルダイアログを開き、その中から1つを選択します。複数の重い同じVueJSコンポーネントをページ上で使用する適切な方法は何ですか？

<div class="input-group"> 
    <input type="text" class="form-control" placeholder="Search for..."> 
    <span class="input-group-btn"> 
     <button class="btn btn-default" type="button" @click="openModal">Choose</button> 
    </span> 
</div>

モーダルダイアログには、複雑なロジックと多くのHTMLコードが含まれています。他のコンポーネントにモーダルダイアログを配置すると思います。以下のような

すべての私のカスタム入力コンポーネントは、テーブルの行にページで使用されます後：

<tr v-for="item in items"> 
    <td><input-component :item="item"><input-component></td> 
</tr>

表10-30行が含まれており、それが問題であること - 私は私の重いモーダルダイアログコードを除外する必要がありますVueJSではDOMに何十もの重複がありますか？

何バリアント私が選択する必要があります：

1）、モーダルダイアログを除外し、ページの上部に一度それを置き、

<body> 
    <modal-component></modal-component> 
    <table><tbody> 
     <tr v-for="item in items"> 
      <td><input-component :item="item"><input-component></td> 
     </tr> 
    </tbody></table> 
</body>

2カスタム入力コンポーネントからそれを呼び出す）がモーダルダイアログを含めると数十を持っていますDOMの重複コード

<body> 
    <table><tbody> 
     <tr v-for="item in items"> 
      <td><input-component :item="item"><input-component></td><!--now contains <modal-component></modal-component>--> 
     </tr> 
    </tbody></table> 
</body>

出典

2017-01-20 brunen9

になります配列から関連データをダイアログに入力します。

Vue.component('customer-dialog', { 
 
\t template: '<p>Customer Dialog</p>' 
 
}) 
 

 
Vue.component('supplier-dialog', { 
 
\t template: '<p>Supplier Dialog</p>' 
 
}) 
 

 
var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    dialog: null // initial dialog to use 
 
    }, 
 
    methods: { 
 
    \t showDialog: function(d) { 
 
    \t this.dialog = d 
 
     // additional dialog initialization code 
 
    } 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script> 
 
<div id="app"> 
 
    <component :is="dialog"></component> 
 
    <button @click="showDialog('customer-dialog')">Customers</button> 
 
    <button @click="showDialog('supplier-dialog')">Suppliers</button> 
 
</div>

あなたはその状態を維持するか、再レンダリングを避けることができるようにメモリに切り替えアウトダイアログを維持したい場合は、要素の動的コンポーネントをラップすることができます。

<keep-alive><component :is="dialog"></component></keep-alive>

出典

2017-01-20 18:42:58 djones

動的コンポーネントを使用することをお勧めしますか？それとも、私の場合の他の3番目の実装を意味しましたか？ – brunen9

私はあなたの提案をしばらく考えていましたが、私にはモーダルコンポーネントを含む複数のコンポーネントを実装する最も適切な方法だと思われます。 – brunen9

ページ全体で1つのモーダルダイアログを使用するだけです。

dynamic componentを使用し、反応性プロパティにコンポーネントタイプをバインド

このような

出典

2017-01-20 16:54:06 gurghet

このコンポーネントの作業がこのコードに完全に依存している場合、コードをいくつか外すことは考えにくいのですか？私は自分のカスタム入力コンポーネントや他の人間の要素でページ上にモーダルを含めることを忘れているようなことを知っています。 – brunen9

2つを含むラッパーコンポーネントを作成するだけです – gurghet

1つのモーダル入力コンポーネントと複数のカスタム入力コンポーネントを含むバリアントでラッパーコンポーネントを適用する方法はありません。 – brunen9

複数の重い同じVueJSコンポーネントをページ上で使用する適切な方法は何ですか？

答えて

関連する問題