随着购物车的最新版本构建在Vue.js之上，我认为可以公平地说，我们在过去几个月里已经掌握了这个框架。
我们仍然像第一天一样爱它。
但为了了解Vue的来龙去脉，我们得累死累活。并不是说它是一个非常复杂的动物。学习曲线实际上是相当平滑的。很简单，用正确的方式做事需要时间。
这也是我们为创造能够帮助开发者走同样道路的内容而感到自豪的原因。
我们已经写了关于状态管理、渲染功能和PWA开发(以及其他与vue相关的事项)。
如今，一切都是关于Vue组件。从基础开始，以下是我将涉及的内容:
什么是组件?
Vue组件的构建块是什么?
如何使用它们?
我将以Vue组件在野外的例子来结束它!
不再浪费时间;让我们开始吧!
什么是Vue组件?
Vue.js组件
组件是一个自包含的、可重用的、通常是单一职责的UI逻辑块。
尽管我在这里使用了“Vue组件”的措辞，但重要的是要知道组件不是特定于Vue的。
是的，Vue.js就是我们所说的“组件框架”。但是React和新成员Svelte也一样。
“组件”方法是一种结构化前端开发的方法，它不会增加开发体验。大多数组件框架的核心都具有响应性，这有利于用户体验，而不牺牲开发人员的易用性。
每个组件可以有自己的状态、标记和样式。真正的神奇之处在于这样一个事实:您可以任意多次重用一个组件。然后，它允许开发人员将应用组织成嵌套组件树:
Vue组件示例
图片取自Vue.js官方文档
您可能可以想象使用这种方法节省了多少时间。
现在已经有数百个组件，您可以快速地将它们导入到您的项目中，以执行从简单到复杂的任务。你可以在vuecomponents.com上找到一个全面的列表。
我现在过于简化了这个概念。您需要知道有不同类型的组件，我们将通过示例进一步探讨这些组件。
首先，让我们看看这些组件中隐藏了什么。
Vue.js组件的构建块
在最基本的。vue文件中编写组件代码时，你会发现有三个部分可以放代码:
vue组件结构
模板。它是用模板语言(HTML)的扩充版本编写的，作为框架的指令，指导框架如何根据组件的内部状态生成组件的最终标记。
脚本。应用程序的逻辑所在的地方。在该部分是输入低级概念，如:
属性:一组用于配置组件行为的输入变量。属性由宿主应用程序或父组件提供。它们可以是数据过滤器、排序顺序、标签、可见性开关等。
状态:这是可选的，但经常出现。这是一种提供组件在给定时间的状态的数据结构。组件的状态会根据发生的事件(点击、滚动、DOM变化)而随时间变化。
风格。CSS的位置。
很简单对吧?组件本身确实非常简单。然而，组件会成为整个应用程序本身的构建块。这就是它可以变得更复杂的地方。
不过别担心，我会掩护你的。
如何使用组件?
组件总是定义了一个名称。这是Vue编译器查找的内容，以便知道在哪里创建和挂载组件实例。当您想在模板中使用组件时，只需创建一个以组件命名的HTML标记。
注册组件最简单的方法是全局使用Vue.component方法。当全局注册时，它们可以在应用程序的组件树的任何地方使用。
以下面的代码片段为例:
//这是全局组件注册
Vue.component(“spinning-text”{
{speed: {type: String}}，
模板:''
})；
Vue.component(“bad-ux-button”{
模板:
'💥Do the thing💥'
})；
//这是我们创建你的根Vue应用实例的地方
new Vue({el: "#bad-ux-app"});
正如您所看到的，在bad-ux-button模板中使用spin -text不需要做任何花哨的事情。它只是工作。
然而，对于更大规模的生产场景，建议使用本地注册，这样构建工具就可以对应用进行代码分割，从而启用组件的惰性加载。这可以显著改善应用程序的包大小和运行时负载。
