Vue 中使用组件的步骤

第一步：创建组件

使用 Vue CLI 脚手架创建新组件：

或者在 src 目录下手动创建组件文件（.vue 扩展名）

第二步：定义组件模板

在组件文件中添加模板代码，指定组件渲染的 HTML 结构。

第三步：定义组件脚本

在组件文件中添加脚本代码，定义组件的功能和状态。
包括 data()、methods()、computed() 和其他钩子函数。

第四步：注册组件

在 main.js 文件中使用 Vueponent() 方法注册组件。
指定组件名称和选项对象（包含模板和脚本）。

第五步：在模板中使用组件

在主模板文件中，使用组件名称作为自定义 HTML 元素使用组件。
例如：

第六步：传递 props（可选）

组件可以接收 props（属性），用于从父组件传递数据。
在组件脚本中定义 props() 选项，并通过 props 对象传递数据。

第七步：发射事件（可选）

组件可以发射事件，用于与父组件通信。
在组件脚本中使用 $emit() 方法发射事件，并在父组件中使用 v-on 指令监听事件。

第八步：使用 slots（可选）

组件可以定义插槽，用于允许子组件填充特定内容区域。
在组件模板中使用 元素定义插槽。