我们什么时候应该使用 Vue.js 的组件答案

【问题标题】：When should we use Vue.js's component我们什么时候应该使用 Vue.js 的组件
【发布时间】：2015-12-16 22:05:01
【问题描述】：

当我研究 Vue.js 的组件系统的特性时。我感到困惑何时何地应该使用它？在 Vue.js 的文档中他们说

Vue.js 允许您将扩展的 Vue 子类视为可重用概念上类似于 Web 组件的组件，但没有需要任何 polyfill。

但是根据他们的示例，我不清楚它对重用有何帮助。我什至认为它的逻辑流程很复杂。

【问题讨论】：

tl;dr 跨浏览器非标准 Web 组件。

标签： web vue.js

【解决方案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 Comp 分开）：

<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++ 行代码时

希望这个答案..

【讨论】：