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

什么是独立组件？

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

在前端开发中，自包含组件是指一个模块化代码单元，它封装了呈现用户界面特定部分所需的视觉元素（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

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">template</span><span style="color:var(--syntax-error-color)">></span>
   <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">div</span> <span style="color:var(--syntax-declaration-color)">class</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">form-control</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-error-color)">></span>
      <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">label</span> <span style="color:var(--syntax-name-color)">v</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">show</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">isLabel</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-declaration-color)">for</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">IdName</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">{{</span> <span style="color:var(--syntax-name-color)">labelValue</span> <span style="color:var(--syntax-text-color)">}}</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/label</span>>
      <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">input</span> 
         <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">CustomType</span><span style="color:var(--syntax-string-color)">"</span>
         <span style="color:var(--syntax-declaration-color)">class</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">custom__inputs</span><span style="color:var(--syntax-string-color)">"</span>
         <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">placeholder</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">PlaceHolder</span><span style="color:var(--syntax-string-color)">"</span>
         <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">value</span><span style="color:var(--syntax-string-color)">"</span>
         <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">readonly</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">readOnly</span><span style="color:var(--syntax-string-color)">"</span>
         <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">id</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">IdName</span><span style="color:var(--syntax-string-color)">"</span>
         <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">autofocus</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">setFocus</span><span style="color:var(--syntax-string-color)">"</span>
         <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">autocomplete</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">setAutocomplete</span><span style="color:var(--syntax-string-color)">"</span>
         <span style="color:var(--syntax-text-color)">@</span><span style="color:var(--syntax-name-color)">input</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">onInput</span><span style="color:var(--syntax-string-color)">"</span>
      <span style="color:var(--syntax-error-color)">></span>
      <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">p</span> <span style="color:var(--syntax-name-color)">v</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">show</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">withValidation</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-text-color)">{{</span> <span style="color:var(--syntax-name-color)">errorMsg</span> <span style="color:var(--syntax-text-color)">}}</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/p</span>>
   <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/div</span>>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/template</span>>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">script</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-text-color)">{</span>
   <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">CustomInput</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
   <span style="color:var(--syntax-name-color)">props</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">labelValue</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
         <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">String</span><span style="color:var(--syntax-text-color)">,</span>
         <span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">Label</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-text-color)">},</span>
      <span style="color:var(--syntax-name-color)">isLabel</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
         <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">Boolean</span><span style="color:var(--syntax-text-color)">,</span>
         <span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">false</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-text-color)">},</span>
      <span style="color:var(--syntax-name-color)">CustomType</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
         <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">String</span><span style="color:var(--syntax-text-color)">,</span>
         <span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">text</span><span style="color:var(--syntax-string-color)">'</span>
      <span style="color:var(--syntax-text-color)">},</span>
      <span style="color:var(--syntax-name-color)">PlaceHolder</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
         <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">String</span><span style="color:var(--syntax-text-color)">,</span>
         <span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-string-color)">''</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-text-color)">},</span>
      <span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
         <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">String</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-text-color)">},</span>
      <span style="color:var(--syntax-name-color)">readOnly</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
         <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">Boolean</span><span style="color:var(--syntax-text-color)">,</span>
         <span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">false</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-text-color)">},</span>
      <span style="color:var(--syntax-name-color)">IdName</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
         <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">String</span><span style="color:var(--syntax-text-color)">,</span>
         <span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">''</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-text-color)">},</span>
      <span style="color:var(--syntax-name-color)">setFocus</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
         <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">Boolean</span><span style="color:var(--syntax-text-color)">,</span>
         <span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">false</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-text-color)">},</span>
      <span style="color:var(--syntax-name-color)">setAutocomplete</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
         <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">Boolean</span><span style="color:var(--syntax-text-color)">,</span>
         <span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">true</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-text-color)">},</span>
      <span style="color:var(--syntax-name-color)">withValidation</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
         <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">Boolean</span><span style="color:var(--syntax-text-color)">,</span>
         <span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-declaration-color)">false</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-text-color)">},</span>
      <span style="color:var(--syntax-name-color)">errorMsg</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
         <span style="color:var(--syntax-name-color)">type</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">String</span><span style="color:var(--syntax-text-color)">,</span>
         <span style="color:var(--syntax-name-color)">default</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">''</span>
      <span style="color:var(--syntax-text-color)">}</span>
   <span style="color:var(--syntax-text-color)">},</span>
   <span style="color:var(--syntax-name-color)">methods</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">onInput</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">){</span>
         <span style="color:var(--syntax-declaration-color)">this</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">$emit</span><span style="color:var(--syntax-text-color)">(</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">input</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span> <span style="color:var(--syntax-name-color)">e</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">target</span><span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-text-color)">);</span>
      <span style="color:var(--syntax-text-color)">}</span>
   <span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/script</span>>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">style</span> <span style="color:var(--syntax-name-color)">lang</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">scss</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-name-color)">scoped</span><span style="color:var(--syntax-error-color)">></span>
   <span style="color:var(--syntax-comment-color)">//component styles</span>
   <span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">form</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">control</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-text-color)">display</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">flex</span><span style="color:var(--syntax-text-color)">;</span>
      <span style="color:var(--syntax-name-color)">flex</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">direction</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">column</span><span style="color:var(--syntax-text-color)">;</span>
      <span style="color:var(--syntax-name-color)">align</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">items</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">flex</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">start</span><span style="color:var(--syntax-text-color)">;</span>
      <span style="color:var(--syntax-name-color)">margin</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">bottom</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-name-color)">rem</span><span style="color:var(--syntax-text-color)">;</span>

      <span style="color:var(--syntax-error-color)">&</span> <span style="color:var(--syntax-name-color)">label</span> <span style="color:var(--syntax-text-color)">{</span>
         <span style="color:var(--syntax-text-color)">padding</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">5</span><span style="color:var(--syntax-name-color)">px</span> <span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-name-color)">px</span><span style="color:var(--syntax-text-color)">;</span>
      <span style="color:var(--syntax-text-color)">}</span>

      <span style="color:var(--syntax-error-color)">&</span> <span style="color:var(--syntax-name-color)">p</span> <span style="color:var(--syntax-text-color)">{</span>
         <span style="color:var(--syntax-text-color)">margin</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-name-color)">px</span> <span style="color:var(--syntax-literal-color)">0</span><span style="color:var(--syntax-name-color)">px</span><span style="color:var(--syntax-text-color)">;</span>
         <span style="color:var(--syntax-name-color)">font</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">size</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">14</span><span style="color:var(--syntax-name-color)">px</span><span style="color:var(--syntax-text-color)">;</span>
         <span style="color:var(--syntax-text-color)">color</span><span style="color:var(--syntax-text-color)">:</span> #<span style="color:var(--syntax-name-color)">e74e3c</span><span style="color:var(--syntax-text-color)">;</span>
      <span style="color:var(--syntax-text-color)">}</span>
   <span style="color:var(--syntax-text-color)">}</span>

   <span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">custom__inputs</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-text-color)">padding</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">10</span><span style="color:var(--syntax-name-color)">px</span> <span style="color:var(--syntax-text-color)">;</span>
      <span style="color:var(--syntax-name-color)">font</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">size</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">16</span><span style="color:var(--syntax-name-color)">px</span><span style="color:var(--syntax-text-color)">;</span>
      <span style="color:var(--syntax-text-color)">border</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">2</span><span style="color:var(--syntax-name-color)">px</span> <span style="color:var(--syntax-name-color)">solid</span> #<span style="color:var(--syntax-name-color)">eee</span><span style="color:var(--syntax-text-color)">;</span>
      <span style="color:var(--syntax-name-color)">border</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">radius</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">5</span><span style="color:var(--syntax-name-color)">px</span><span style="color:var(--syntax-text-color)">;</span>
      <span style="color:var(--syntax-text-color)">width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">100</span><span style="color:var(--syntax-error-color)">%</span><span style="color:var(--syntax-text-color)">;</span>

      <span style="color:var(--syntax-error-color)">&</span><span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">focus</span> <span style="color:var(--syntax-text-color)">{</span>
         <span style="color:var(--syntax-text-color)">border</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">3</span><span style="color:var(--syntax-name-color)">px</span> <span style="color:var(--syntax-name-color)">solid</span> #<span style="color:var(--syntax-literal-color)">67679</span><span style="color:var(--syntax-name-color)">ac5</span><span style="color:var(--syntax-text-color)">;</span>
      <span style="color:var(--syntax-text-color)">}</span>
   <span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/style</span>>
</code></span></span>

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

<span style="color:var(--syntax-text-color)"><span style="color:var(--syntax-text-color)"><code><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">template</span><span style="color:var(--syntax-error-color)">></span>
  <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">div</span> <span style="color:var(--syntax-declaration-color)">class</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">home</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-error-color)">></span>
    <span style="color:var(--syntax-comment-color)"><!--</span> <span style="color:var(--syntax-name-color)">render</span> <span style="color:var(--syntax-name-color)">emit</span> <span style="color:var(--syntax-name-color)">data</span> <span style="color:var(--syntax-error-color)">--></span>
    <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">form</span> <span style="color:var(--syntax-declaration-color)">class</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">form__container</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-name-color)">action</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">""</span><span style="color:var(--syntax-error-color)">></span>
      <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">CustomInputVue</span>
        <span style="color:var(--syntax-name-color)">v</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">model</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">firstName</span><span style="color:var(--syntax-string-color)">"</span>
        <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">firstName</span><span style="color:var(--syntax-string-color)">"</span>
        <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">PlaceHolder</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">'Firstname'</span><span style="color:var(--syntax-string-color)">"</span>
        <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">withValidation</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">true</span><span style="color:var(--syntax-string-color)">"</span>
        <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">errorMsg</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">'required'</span><span style="color:var(--syntax-string-color)">"</span>
        <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">isLabel</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">true</span><span style="color:var(--syntax-string-color)">"</span>
        <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">labelValue</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">'FirstName'</span><span style="color:var(--syntax-string-color)">"</span>
      <span style="color:var(--syntax-error-color)">/></span>
      <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">CustomInputVue</span>
        <span style="color:var(--syntax-name-color)">v</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">model</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">email</span><span style="color:var(--syntax-string-color)">"</span>
        <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">value</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">email</span><span style="color:var(--syntax-string-color)">"</span>
        <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">PlaceHolder</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">'hello@example'</span><span style="color:var(--syntax-string-color)">"</span>
        <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">withValidation</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">true</span><span style="color:var(--syntax-string-color)">"</span>
        <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">errorMsg</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">'required'</span><span style="color:var(--syntax-string-color)">"</span>
        <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">isLabel</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">true</span><span style="color:var(--syntax-string-color)">"</span>
        <span style="color:var(--syntax-text-color)">:</span><span style="color:var(--syntax-name-color)">labelValue</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">'Email'</span><span style="color:var(--syntax-string-color)">"</span>
      <span style="color:var(--syntax-error-color)">/></span>
      <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">button</span> <span style="color:var(--syntax-declaration-color)">class</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">btn</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-error-color)">></span><span style="color:var(--syntax-name-color)">submit</span><span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/button</span>>
    <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/form</span>>

  <span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/div</span>>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/template</span>>

<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">script</span><span style="color:var(--syntax-error-color)">></span>
<span style="color:var(--syntax-comment-color)">// @ is an alias to /src</span>
<span style="color:var(--syntax-declaration-color)">import</span> <span style="color:var(--syntax-name-color)">CustomInputVue</span> <span style="color:var(--syntax-declaration-color)">from</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">@/components/common/CustomInput.vue</span><span style="color:var(--syntax-string-color)">'</span>


<span style="color:var(--syntax-declaration-color)">export</span> <span style="color:var(--syntax-declaration-color)">default</span> <span style="color:var(--syntax-text-color)">{</span>
  <span style="color:var(--syntax-name-color)">name</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">HomeView</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-name-color)">components</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-name-color)">CustomInputVue</span><span style="color:var(--syntax-text-color)">,</span>
  <span style="color:var(--syntax-text-color)">},</span>
  <span style="color:var(--syntax-name-color)">data</span><span style="color:var(--syntax-text-color)">(){</span>
    <span style="color:var(--syntax-declaration-color)">return</span> <span style="color:var(--syntax-text-color)">{</span>
      <span style="color:var(--syntax-name-color)">parentData</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">You are learning about props in this article</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-name-color)">newMsg</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-string-color)">hello</span><span style="color:var(--syntax-string-color)">'</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-name-color)">firstName</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">''</span><span style="color:var(--syntax-text-color)">,</span>
      <span style="color:var(--syntax-name-color)">email</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-string-color)">''</span>
    <span style="color:var(--syntax-text-color)">}</span>
  <span style="color:var(--syntax-text-color)">},</span>
<span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/script</span>>

<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-name-color)">style</span> <span style="color:var(--syntax-name-color)">lang</span><span style="color:var(--syntax-error-color)">=</span><span style="color:var(--syntax-string-color)">"</span><span style="color:var(--syntax-string-color)">scss</span><span style="color:var(--syntax-string-color)">"</span> <span style="color:var(--syntax-name-color)">scoped</span><span style="color:var(--syntax-error-color)">></span>
  <span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">form__container</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-text-color)">width</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">40</span><span style="color:var(--syntax-error-color)">%</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-text-color)">margin</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">0</span> <span style="color:var(--syntax-name-color)">auto</span><span style="color:var(--syntax-text-color)">;</span>
  <span style="color:var(--syntax-text-color)">}</span>

  <span style="color:var(--syntax-text-color)">.</span><span style="color:var(--syntax-name-color)">btn</span> <span style="color:var(--syntax-text-color)">{</span>
    <span style="color:var(--syntax-text-color)">background</span><span style="color:var(--syntax-text-color)">:</span> #<span style="color:var(--syntax-literal-color)">0000</span><span style="color:var(--syntax-name-color)">ff</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-text-color)">color</span><span style="color:var(--syntax-text-color)">:</span> #<span style="color:var(--syntax-name-color)">fff</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-name-color)">font</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">size</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">18</span><span style="color:var(--syntax-name-color)">px</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-text-color)">padding</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">7</span><span style="color:var(--syntax-name-color)">px</span> <span style="color:var(--syntax-literal-color)">15</span><span style="color:var(--syntax-name-color)">px</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-text-color)">border</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-name-color)">none</span><span style="color:var(--syntax-text-color)">;</span>
    <span style="color:var(--syntax-name-color)">border</span><span style="color:var(--syntax-error-color)">-</span><span style="color:var(--syntax-name-color)">radius</span><span style="color:var(--syntax-text-color)">:</span> <span style="color:var(--syntax-literal-color)">5</span><span style="color:var(--syntax-name-color)">px</span><span style="color:var(--syntax-text-color)">;</span>

  <span style="color:var(--syntax-text-color)">}</span>
<span style="color:var(--syntax-error-color)"><</span><span style="color:var(--syntax-string-color)">/style</span>>

</code></span></span>

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

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

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

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

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

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

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

最终结果的图像：