什么时候应该使用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个++行代码

希望这回答了..