在 Vue.js 中，组件是构建用户界面的基本单位。通过将页面拆分为多个组件，可以更好地管理和维护代码，提高代码的复用性和可维护性。Vue.js 的组件系统使得开发者可以轻松地将页面分解为独立的、可复用的组件，然后组合这些组件来构建复杂的用户界面。
创建一个 Vue.js 组件
要创建一个 Vue.js 组件，首先需要定义一个 Vue 实例，然后将组件的选项传递给 Vue 实例的 components 属性。组件选项包括组件的模板、数据、方法等。
-- -------------------- ---- -------
----------
-----
---------- ------ ---------------
------
-----------
--------
------ ------- -
----- --------------
------ -
------ -
-------- -------- -- -- ------ -----------
-
--
-------- -
------- -
--------------------
-
-
-
---------在上面的代码中，我们定义了一个名为 MyComponent 的 Vue 组件，包含一个简单的模板和一个数据属性 message，以及一个方法 greet。在模板中，我们使用双大括号语法 {{ message }} 来显示数据属性的值，当调用 greet 方法时，会弹出一个包含 message 的提示框。
注册和使用组件
要在应用中使用一个组件，首先需要将其注册到 Vue 实例中。注册组件的方式有两种：全局注册和局部注册。
全局注册组件
全局注册组件是将组件注册到 Vue 实例中的方式，使得该组件在整个应用中都可以被使用。
import Vue from 'vue';
import MyComponent from './MyComponent.vue';
Vue.component('my-component', MyComponent);在上面的代码中，我们将 MyComponent 组件注册为 my-component，这样在应用中就可以使用 <my-component> 标签来引入该组件。
局部注册组件
局部注册组件是将组件注册到另一个组件中的方式，使得该组件只能在父组件中被使用。
-- -------------------- ---- -------
----------
-----
-----------------------------
------
-----------
--------
------ ----------- ---- --------------------
------ ------- -
----------- -
--------------- -----------
-
-
---------在上面的代码中，我们在父组件中注册了 MyComponent 组件，然后在模板中使用 <my-component> 标签来引入该组件。
组件通信
在 Vue.js 中，组件之间的通信可以通过 props 和 events 来实现。props 是从父组件向子组件传递数据，而 events 是从子组件向父组件传递数据。
使用 props 传递数据
-- -------------------- ---- -------
---- ------------------- ---
----------
-----
---------------- -------------------------------------------
------
-----------
--------
------ -------------- ---- -----------------------
------ ------- -
------ -
------ -
-------------- ------ ---- ------ -----------
-
--
----------- -
------------------ --------------
-
-
---------
---- ------------------ ---
----------
-----
------ ------- -------
------
-----------
--------
------ ------- -
------ -----------
-
---------在上面的代码中，我们在父组件中使用 v-bind 指令将 parentMessage 数据传递给子组件，并在子组件中通过 props 属性声明接收的数据。
使用 events 传递数据
-- -------------------- ---- -------
---- ------------------ ---
----------
-----
------- ------------------------------ ---- -- ---------------
------
-----------
--------
------ ------- -
-------- -
------------------ -
----------------------- ------ ---- ----- -------------
-
-
-
---------
---- ------------------- ---
----------
-----
---------------- ----------------------------------------------------
------
-----------
--------
------ -------------- ---- -----------------------
------ ------- -
-------- -
-------------------------- -
------------
-
--
----------- -
------------------ --------------
-
-
---------在上面的代码中，我们在子组件中通过 $emit 方法触发一个名为 send-data 的事件，并传递数据给父组件，然后在父组件中使用 @send-data 监听事件，并在回调函数中接收数据。
这就是 Vue.js 组件的基本用法和通信方式，通过组件化开发，可以更好地组织和管理代码，提高开发效率和代码质量。