如何构建运行良好的Vue组件

时间：2023-03-16 18:11:00 科技观察

如何构建运行良好的Vue组件我们大多数人都是从自己编写组件开始的——我们遇到问题并决定通过构建组件来解决它。有时我们发现自己想在代码库的新位置解决同样的问题，所以我们使用组件并重构它们以使其可重用。然后我们想在不同的项目中使用它，所以我们将它移到一个独立的包中。然后我们想“嘿，为什么不与世界分享这个呢？”所以我们开源了这个组件。一方面，这意味着对于任何使用Vue工作的人来说，都有大量且不断增长的开源组件可供使用，这很棒。另一方面，由于这些组件大多来自于特定的场景，并不是所有的组件都有跨多环境复用组件的设计经验，所以这些组件中有很多并不能很好地与Vue生态系统配合。该系统一起使用。“不错”是什么意思？在高层次上，这意味着该行为对于Vue开发人员来说是自然的，并且易于扩展和集成到任何类型的应用程序中。在探索了广泛的开源组件之后，我认为以下几点是如何制作一个功能良好的Vue组件：实现v-model兼容性事件透明度将属性分配给正确的元素以接受浏览器的键盘导航规范使用事件优先于回调限制组件样式实现`v-model`兼容性表单字段组件使其惯用的最重要方法之一是支持v-model。根据官方文档，v-model本质上是语法糖，即使用v-model绑定数据后，其实不仅仅是绑定数据，还添加了输入事件监听器，如下：自定义事件也可以用于创建支持v-model的自定义输入组件。记住：等同于：当用在一个组件上时，v-model会是这样的：为了让它正常工作，这个组件中的必须：绑定它的value属性设置一个名为value的prop，当它的input事件被触发时，通过自定义input事件抛出新值并编写如下代码：现在v-model应该可以在这个组件上完美工作了Up:事件透明度为了实现v-model，组件需要实现输入事件。但是其他事件呢？比如点击事件、键盘处理等？虽然原生事件在HTML中冒泡，但Vue的事件处理默认情况下不会冒泡。例如，除非我做一些特定的事情，否则这将不起作用TheshowFocuseventhandlerwillneverbecalledunlesswewriteinthewrappercomponenttoemitthefocusevent。然而，Vue确实为我们提供了一种以编程方式访问应用于组件的侦听器的方法，因此我们可以将它们分配到正确的位置：$listener对象。再想想，原因很明显：这允许我们将侦听器传递到组件中的正确位置。例如，使用textarea包装器组件

现在发生在textarea上的事件是传递的事件.如何理解vue中的$listeners属性？假设有一个父组件Parent和一个子组件Child，那么当你使用Child时，所有传入的v-on事件都可以在$listeners对象中找到。//Childcreated(){console.log(this.$listeners)//{'event-one':f(),'event-two':f()}}给正确的元素赋属性如何处理行textarea或为任何元素的简单工具提示添加标题标签等属性？默认情况下，Vue获取应用于组件的属性并将其放置在该组件的根元素上。但这并不总是我们想要的。如果我们从上方再次查看textarea包装器，在这种情况下将属性应用于textarea本身而不是div更有意义。为此，我们告诉组件默认不应用属性，而是使用$attrs对象直接应用它们，在JS代码中：exportdefault{inheritAttrs:false,}在模板

官方文档在讲解组件的属性传递的时候，讲到了$attrs和inheritAttrs这两个属性，以及这两个属性的组合会更有用。乍一看没看懂，结合代码演示想明白了。首先隐藏inheritAttrs:false和v-bind="$attrs"，浏览器得到的结果如下：这里有两个例外：父组件中设置的placeholder等属性没有传递给子组件；父组件设置的属性传递给子组件的根元素，即label，label是不需要的。$attrs和inheritAttrs:false分别用来解决这两个问题。首先，inheritAttrs:false解决了子组件根元素继承父元素属性的问题；其次，组件中添加了v?bind="$attrs"的子元素会继承父组件的属性，即使属性没有定义在props中接受浏览器的键盘导航规范Accessibility和keyboardnavigation是最常见的在Web开发部分被遗忘，这是编写组件以在生态系统中正常运行时最重要的事情之一。这意味着确保组件符合浏览器规范：tab键应该允许选择表单字段。Enter通常用于激活按钮或链接。可以在W3C网站上找到通用组件的键盘导航建议的完整列表。遵循这些建议将使您的组件可用于所有应用程序，而不仅仅是那些与可访问性无关的应用程序。使用事件而不是回调当涉及到从组件到其父组件的数据通信和用户交互时，有两种常见的选择：道具和事件中的回调函数。因为Vue的自定义事件不会像浏览器原生事件那样冒泡，所以两者在功能上是等价的，但是对于可重用的组件，能用就推荐用事件，后面是回调。为什么？?在FullstackRadio的一集中，Vue核心团队成员ChrisFritz给出了以下理由：使用事件来明确父组件知道什么。它明确区分了“我们从父组件获得的”和“我们发送给组件的”。表达式可以直接在事件处理程序中使用，为简单的情况提供极其紧凑的事件处理程序。它更加地道——Vue示例和文档倾向于使用事件来实现组件与其父组件之间的通信。幸运的是，如果您当前正在使用props回调，则很容易修改您的组件以发出事件。使用回调的组件可以类似如下：外部调用方式：改为基于事件的方式如下：外部调用方式：限制组件样式Vue的单文件组件结构允许我们将样式直接嵌入到组件中，尤其是与作用域结合使用时，这为我们提供了一种发布完全封装样式组件而不影响其他部分的好方法应用程序。由于该系统的强大功能，可以轻松地将所有组件样式放入一个组件中并交付一个完全样式化的组件。事情是这样的：没有应用程序的样式是相同的，使组件在我们的应用程序中看起来完美的因素将使它在其他人的应用程序中脱颖而出。由于组件样式通常晚于全局样式表被包含，覆盖它可能成为一个特殊性的噩梦。为防止这种情况，建议在我们的组件文件本身中排除或关闭组件结构不需要的任何CSS（颜色、边框、阴影等）。相反，请考虑维护一个可自定义的SCSS部分，允许用户根据自己的喜好进行自定义。InJS：那么，我们可以。这将允许我们随心所欲地使用开箱即用的样式，但是想要自定义的用户不再需要创建高度特定的覆盖，他们可以通过将disableStyles属性设置为true来简单地关闭样式。