Vue.js 是一个流行的 JavaScript 框架，用于构建 Web 应用程序。它提供了许多强大的特性，其中最重要的是组件。Vue.js 组件是可重用的代码块，可以使您的应用程序更易于维护和扩展。在本文中，我们将深入研究 Vue.js 组件，并通过一个实际项目示例来演示如何使用它们。
Vue.js 组件简介
Vue.js 组件是一个自包含的、可重用的模块，它封装了界面上的一小部分，通常包括一个模板、样式和 JavaScript 逻辑。组件可以具有父-子关系，类似于 DOM 树结构。Vue.js 组件使用组件树来表示 UI 的结构，其中根组件为应用程序的入口点。
单文件组件
Vue.js 提供了一种新的组件声明方式，称为单文件组件。这种方式允许您在一个文件中定义组件的所有相关内容。单文件组件通常使用 .vue 文件扩展名。以下是一个简单的 .vue 文件的示例：
-- -------------------- ---- -------
----------
-----
------ ----- -------
----- ----------- ------
------
-----------
--------
------ ------- -
----- --------------
---- -- -
------ -
------ --- -----------
------------ ----- -- - ------ ----------
-
-
-
---------
-------
-- -
---------- ------
-
- -
------ -----
-
--------该文件包括组件的模板、JavaScript 逻辑和样式。上面的代码创建了一个名为 MyComponent 的组件，它包括一个标题和一个描述。注意该文件使用了 ES6 的导出语法。
子组件
在 Vue.js 中，您可以通过另一个组件来定义子组件。子组件是根组件的一部分，可以存储在单个文件中（如上所示），也可以包含在父组件的模板中。以下是一个示例：
-- -------------------- ---- -------
----------
-----
-----------------------------
------
-----------
--------
------ ----------- ---- -------------------
------ ------- -
----------- -
-----------
-
-
---------该文件包括一个包含 MyComponent 子组件的父组件。父组件声明 MyComponent 作为一个组件，并在模板中使用它。
Vue.js 组件实战
下面通过一个实际的项目示例来演示如何使用 Vue.js 组件。我们将创建一个简单的 TODO 应用程序，其中用户可以添加、编辑、删除和检查任务。我们将使用单文件组件，路由和 Vuex。以下是该应用程序的设计：
项目结构
首先，让我们创建项目结构。我们将使用 Vue CLI 脚手架来初始化项目和所有文件。在命令提示符下，运行以下命令：
vue create vuejs-todos
该命令将创建一个名为 vuejs-todos 的项目，并在其中添加所有必要的依赖项和文件。以下是该项目的目录结构：
-- -------------------- ---- -------
------------
-------------
-------
----------
----
-------
--------
-----------
-----------
-----------
------------
------------
------
--------
------
---------
------------
-------
-------
----------
---------------
------------
-----------------
---------该项目包括以下组件：
AddTodo.vue：用于添加新任务的表单组件。Filters.vue：用于过滤任务列表的表格组件。TodoItem.vue：用于显示任务的单个项组件。TodoList.vue：用于显示所有任务的列表组件。Todos.vue：用于呈现所有任务和控制面板的页面组件。NotFound.vue：用于处理任何未知路由的组件。
以下是该项目的依赖关系图：
-- -------------------- ---- -------
-------------
- -
- --- -
- -
-------------
-
--------------
- -
- ------- -
- -
--------------
-
--------------
- -
- -------- -
- -
--------------
-
--------------
- -
- -------- -
- -
--------------
-
--------------
- -
- ------- -
- -
--------------
-
--------------
- -
- ----- -
- -
--------------
-
-------------
- -
- -------- -
- -
-------------
组件设计
Filter.vue
该组件用于呈现任务过滤器表格。用户可以选择“全部”、“未完成”或“已完成”来过滤任务列表。该组件包括以下内容：
- “filter”值和用于触发过滤的事件。
以下是该组件的代码：
-- -------------------- ---- -------
----------
---- ----------------
--------------------
------- ---------------- -----------------------
------- ------------------------
------- ------------------------------
------- ------------------------------------
---------
------
-----------
--------
------ ------- -
---- -- -
------ -
------- -----
-
--
-------- -
------------ -- -
--------------------------- ------------
-
-
-
---------TodoItem.vue
该组件用于显示单个任务项。它有一个删除按钮，可以用来删除任务。该组件包括以下内容：
todo，既包含任务的详细信息，又包含任务的各种状态。- 删除按钮和触发删除事件的方法。
以下是该组件的代码：
-- -------------------- ---- -------
----------
----
---- -----------------
-------
------ --------------- ------------------------ -------------------------
----- -------------------------
--------
------
---- --------------------- ---------- --------
---- ------------------- --------------------
-- --------- ----------------
------
-----
-----------
--------
------ ------- -
------ ---------
-------- -
-------------- -- -
----------------------------- ----------
--
---------- -- -
------------------------- ----------
-
-
-
---------TodoList.vue
该组件用于呈现任务列表。它接受一个任务列表数组，并循环显示每个任务项。该组件包括以下内容：
- 任务列表数组。
- All、 Active 和 Completed 的任务总数。
- 用于在应用程序中触发各种操作的事件。
以下是该组件的代码：
-- -------------------- ---- -------
----------
--- --------------
----- ----------- -- ------ -------------
---------- -------------- ------------ --------------------------------- --------------------------------------
-------
-----
-----------
--------
------ -------- ---- ----------------
------ ------- -
----------- -
--------
--
------ ----------
-------- -
-------------- ------ -
----------------------------- -----
--
---------- ------ -
------------------------- -----
-
-
-
---------AddTodo.vue
该组件用于添加新任务。它包括一个文本字段和添加按钮，并触发一个“添加任务”事件。该组件包括以下验证：
- 禁止空白任务的添加。
以下是该组件的代码：
-- -------------------- ---- -------
----------
---- -----------------
------ ----------- ----------------- ---------------- --- ----- --
------- ---------------------------- -----------------------------
------
-----------
--------
------ ------- -
---- -- -
------ -
-------- --
-
--
-------- -
------- -- -
----- ---- - -
--- -----------
------ --------------------
---------- -----
-
---------------------- -----
------------ - --
-
-
-
---------Todos.vue
该组件是整个应用程序的主要页面。它包括以下内容：
- 筛选器组件。
- TodoList 组件。
- AddTodo 组件。
- Vuex 状态管理器中的状态。
下面是该组件的代码：
-- -------------------- ---- -------
----------
---- ------------------
--------------
-------- ----------------------------------------
---- ----------------------
--------- -------------------------------
------
---- -------------------
---------- ---------------------- --------------------------------- --------------------------------------
------
---- ---------------------
---- ------------------------------ ---------- ----------- ----- ----------
---- ----------------------- -------------------- - -- ----------------------------- --------- --- -------------- ---------
------
------
-----------
--------
------ - ----------- ---------- - ---- ------
------ ------- ---- --------------------------
------ -------- ---- ---------------------------
------ ------- ---- --------------------------
------ ------- -
----------- -
--------
---------
-------
--
--------- -
---------------
----------------
-------------
----------------
--
--
-------- -
---------------
----------
-----------------
-------------
---------------
----------------
--
-
-
---------Vue.js 状态管理器：Vuex
在此 TODO 应用程序中，我们使用了 Vuex 规范化的状态管理架构。此架构将应用程序状态分成多个部分，并在数据流中建立了一些规则，以使代码更易于维护。
在此分析中，我们正考虑有关的状态类型：
todos: 包括当前存储在系统中的所有任务。filter: 任务列表的过滤器类型。
以下是处理状态的代码的简单示例：
-- -------------------- ---- -------
------ ---- ---- ------
------ --- ---- -----
-------------
----- ----- - -
------ -
- --- -- ------ ----- --- ---------- ----- --
- --- -- ------ ----- --- ---------- ---- -
--
------- -----
-
----- ------- - -
-------------- ------- -- -
------ -------------- -
---- ------
------ -----------
---- ---------
------ ----------------------- -- ----------------
---- ------------
------ ----------------------- -- ---------------
--------
------ -----------
-
--
----------- ------- -------- -- -
------ ----------------------------
--
--------------- ------- -------- -- -
------ --------------------------------- -- ----------------------
-
-
----- ------- - -
------- -- ------ -- ----- -
----------------- -----
--
-------------- -- ------ -- ----- -
------------------------ -----
--
---------- -- ------ -- ----- -
-------------------- -----
--
------------ -- ------ -- ------- -
---------------------- -------
--
-------------- -- ------ -- -
------------------------
-
-
----- --------- - -
------- ------- ----- -
----------------------
--
-------------- ------- ----- -
----- ----- - -------------------------
------------------------- -- -
--------
---------- ---------------
--
--
---------- ------- ----- -
----- ----- - -------------------------
------------------------- --
--
------------ ------- ------- -
------------ - ------
--
-------------- ------- -
----------- - ----------------------- -- ----------------
-
-
------ ------- --- ------------
------
--------
--------
---------
--结论
Vue.js 组件是构建 Web 应用程序的关键部件。在本文中，我们研究了如何使用单文件组件、子组件等来创建 Vue.js 组件，并通过一个实际项目的示例，演示了这些组件如何在 Vue.js 应用程序中协同工作。另外，我们还研究了使用 Vuex 规范化的状态架构来管理应用程序的状态，以使代码更易于维护。这些技术可以帮助您构建更好的、更易于维护的 Vue.js 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66eeac5a6fbf960197272e0b