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

绝地灬酷狼 2024-03-16 19:05 16阅读 0赞

**什么是独立组件？**

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

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

![32324f80d51760a6523774bd04fdc4dd.png][]

从上图中，有几点需要注意：

*  输入：有两个数据输入字段；数据在第一个输入中作为 prop 传递给组件，而第二个是用户输入数据。
 *  组件：它是独立的、模块化的和可重用的。通过 props 接受数据并将其传递给内部配置进行处理。
 *  内部配置：组件通常可以接受道具或配置选项来定制它们的外观或行为。这种灵活性使他们能够在不修改底层代码的情况下适应不同的用例；所有工作都在组件内完成。

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

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

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

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

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

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

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

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

src/components/common/CustomInput.vue

<code><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>
 </code>

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

这个组件的使用有几点需要注意

`labelValue`：它接受字符串数据；它用于传递输入的标签标题。设置为 true 时应与 isLabel 一起使用。  
  
`isLabel`：它接受布尔数据；默认为 false；如果要使用内部标签，请将其设置为 true；否则，它应该是错误的。

`CustomType`：它接受字符串数据；您可以将需要使用的输入类型传递给它。

`PlaceHolder`: 它接受字符串数据。  
  
`value`：它接受字符串数据；

`readOnly`：它接受布尔数据；如果您需要将表单输入设置为只读，则应将其设置为 true。  
  
`IdName`：这是为了将 id 传递给表单输入，它接受一串数据。  
  
`setFocus`：接受一个布尔值，这是为了控制输入字段的焦点。

`setAutocomplete`：这是为了在文本输入时设置 HTML 自动完成。  
  
`withValidation`: 这个默认是false，但是如果你想给props添加验证信息，可以设置为true。

`errorMsg`：接受一串数据；作为错误消息，应将“with validation”设置为 true。

最终结果的图像：

![866ca2943f8d7699a5f120dadb68d13c.png][]

[JSX]: http://telegeram1.com
[32324f80d51760a6523774bd04fdc4dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/d85bd2e0c79f480199cab1e900b21b2d.png
[VueJs]: https://zhifj.com
[866ca2943f8d7699a5f120dadb68d13c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/f157e8d43db248ce9984f422b14b3689.png