什麼時候應該使用Vue.js的組件

Question

當我研究Vue.js組件系統的功能時。我感到困惑何時何地應該使用它？在Vue.js的doc他們說

Vue.js允許你將延長Vue的子類爲可重複使用的 組件概念上類似於Web組件，而不需要 任何polyfills。

但基於他們的例子，我不清楚它是如何幫助重用。我甚至認爲它複雜的邏輯流程。

Answer 1

例如，您在應用程序中使用「警報」很多。如果你經歷了自舉，警報會是這樣：

<div class="alert alert-danger"> 
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> 
    <strong>Title!</strong> Alert body ... 
</div> 

而是在寫它的一遍又一遍，你實際上可以使之成爲一個組件在VUE：

Vue.component('alert', { 
    props: ['type','bold','msg'], 
    data : function() { return { isShown: true }; }, 
    methods : { 
     closeAlert : function() { 
      this.isShown = false; 
     } 
    } 
}); 

和HTML模板（只是要清楚，我從Vue公司比較上述分開處理）：

<div class="alert alert-{{ type }}" v-show="isShown"> 
    <button type="button" class="close" v-on="click: closeAlert()">&times;</button> 
    <strong>{{ bold }}</strong> {{ msg }} 
</div> 

然後，你可以這樣調用：

<alert type="success|danger|warning|success" bold="Oops!" msg="This is the message"></alert> 

注意，這只是一個模板代碼4線，想象當你的應用程序使用大量的「小工具」的100個++行代碼

希望這回答了..