第 4(a) 部分：如何构建独立组件

Dear 丶 2024-03-16 13:05 62阅读 0赞

什么是独立组件？

在构建前端应用程序时，更建议以将应用程序组件分解为小的、独立的和可重用的部分的思维方式进行开发。这将有助于管理代码库，因为它知道在出现问题时应该去哪里。

在前端开发中，自包含组件是指一个模块化代码单元，它封装了呈现用户界面特定部分所需的视觉元素（HTML 或 JSX）、样式 (CSS) 和行为 (JavaScript)。这些组件被设计成独立的和可重用的，使它们成为创建复杂用户界面的基本构建块。该组件允许配置并接受数据作为道具。  
![在这里插入图片描述][f5be77d9c6da41d68d0c807d52520e29.png]  
从上图中，有几点需要注意：

输入：有两个数据输入字段；数据在第一个输入中作为 prop 传递给组件，而第二个是用户输入数据。

组件：它是独立的、模块化的和可重用的。通过 props 接受数据并将其传递给内部配置进行处理。

内部配置：组件通常可以接受道具或配置选项来定制它们的外观或行为。这种灵活性使他们能够在不修改底层代码的情况下适应不同的用例；所有工作都在组件内完成。

在此示例中，我们将使用 VueJs 创建一个可重用的输入字段、一个下拉选择和一个模式弹出组件。这些组件是我们在开发本系列的项目阶段时将使用的组件。该组件不是可访问的输入，因为它缺少一些重要的可访问性功能，例如键盘控制和 wai-aria 角色。

这是为了以简短明了的方式向读者解释这个概念而创建的。但是，在构建生产环境时，应该努力使自己的应用程序易于访问。

构建可重复使用的表单输入

要在 Vue 中构建一个独立的组件，您可以按照以下步骤操作：

注意：我们使用的是第 1 部分中设置的现有 Vue 项目。

第一步：新建一个文件夹，比如命名为common。在您的组件目录中。  
该文件夹将包含我们所有的可重用组件

第 2 步：创建一个新的组件文件。  
在您的项目目录中，导航到 src/components/common 文件夹（如果不存在则创建它）。为您的组件创建一个新文件，例如 CustomInput.vue。

第 3 步：定义组件  
在您首选的代码编辑器中打开 CustomInput.vue 文件，并使用 Vue 的单文件组件语法定义您的组件。

src/components/common/CustomInput.vue

<template>
       <div class="form-control">
          <label v-show="isLabel" :for="IdName">{
       
        {
       
         labelValue }}</label>
          <input 
             :type="CustomType"
             class="custom__inputs"
             :placeholder="PlaceHolder"
             :value="value"
             :readonly="readOnly"
             :id="IdName"
             :autofocus="setFocus"
             :autocomplete="setAutocomplete"
             @input="onInput"
          >
          <p v-show="withValidation">{
       
        {
       
         errorMsg }}</p>
       </div>
    </template>
    <script>
    export default {
       
        
       name:'CustomInput',
       props: {
       
        
          labelValue: {
       
        
             type: String,
             default<

[f5be77d9c6da41d68d0c807d52520e29.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/159ad45811714d56bd232c49d792f5d3.png