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

最新推荐文章于 2024-10-04 00:46:18 发布

Q shen

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量51

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_52010446/article/details/131032592

版权

本文介绍了在前端开发中使用独立组件的概念，以VueJs为例，详细讲解如何创建一个自包含、可重用的输入字段组件。通过定义组件的结构、属性和方法，以及如何在其他组件中使用这些自定义组件，强调了组件化和模块化对于管理代码和提高代码复用性的重要性。

摘要由CSDN通过智能技术生成

什么是独立组件？

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

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

输入：有两个数据输入字段；数据在第一个输入中作为 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: 'Label',
      },
      isLabel: {
         type: Boolean,
         default: false,
      },
      CustomType: {
         type: String,
         default: 'text'
      },
      PlaceHolder: {
         type: String,
         default:'',
      },
      value: {
         type: String,
      },
      readOnly: {
         type: Boolean,
         default: false,
      },
      IdName: {
         type: String,
         default: '',
      },
      setFocus: {
         type: Boolean,
         default: false,
      },
      setAutocomplete: {
         type: Boolean,
         default: true,
      },
      withValidation: {
         type: Boolean,
         default: false,
      },
      errorMsg: {
         type: String,
         default: ''
      }
   },
   methods: {
      onInput(e){
         this.$emit('input', e.target.value);
      }
   }
}
</script>
<style lang="scss" scoped>
   //component styles
   .form-control {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: 2rem;

      & label {
         padding: 5px 2px;
      }

      & p {
         margin: 2px 0px;
         font-size: 14px;
         color: #e74e3c;
      }
   }

   .custom__inputs {
      padding: 10px ;
      font-size: 16px;
      border: 2px solid #eee;
      border-radius: 5px;
      width: 100%;

      &:focus {
         border: 3px solid #67679ac5;
      }
   }
</style>

第 4 步：使用组件。
要使用您的自定义输入组件，您可以将其导入另一个 Vue 组件并将其包含在模板中。比如进入同一个src文件夹下的view文件夹，使用Home.vue中的组件，如下：

<template>
  <div class="home">
    <!-- render emit data -->
    <form class="form__container" action="">
      <CustomInputVue
        v-model="firstName"
        :value="firstName"
        :PlaceHolder="'Firstname'"
        :withValidation="true"
        :errorMsg="'required'"
        :isLabel="true"
        :labelValue="'FirstName'"
      />
      <CustomInputVue
        v-model="email"
        :value="email"
        :PlaceHolder="'hello@example'"
        :withValidation="true"
        :errorMsg="'required'"
        :isLabel="true"
        :labelValue="'Email'"
      />
      <button class="btn">submit</button>
    </form>

  </div>
</template>

<script>
// @ is an alias to /src
import CustomInputVue from '@/components/common/CustomInput.vue'


export default {
  name: 'HomeView',
  components: {
    CustomInputVue,
  },
  data(){
    return {
      parentData: 'You are learning about props in this article',
      newMsg: 'hello',
      firstName: '',
      email: ''
    }
  },
}
</script>

<style lang="scss" scoped>
  .form__container {
    width: 40%;
    margin: 0 auto;
  }

  .btn {
    background: #0000ff;
    color: #fff;
    font-size: 18px;
    padding: 7px 15px;
    border: none;
    border-radius: 5px;

  }
</style>