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

Question

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

Vue.js allows you to treat extended Vue subclasses as reusable components that are conceptually similar to Web Components, without requiring any polyfills.

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

Answer 1

例如，您在应用中经常使用 "alerts"。如果您遇到过 bootstrap，警报将是这样的：

<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 行模板代码，想象一下当您的应用使用大量 "widgets" 和 100++ 行代码

希望这个答案..

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

When should we use Vue.js's component

web

vue.js