Vue 组件是用于重用代码的模块化单元，可提高代码的可重用性和可维护性。有两种方法可定义 Vue 组件：1. 使用 options API：使用 Vue.extend() 方法创建组件。2. 使用组合 API：使用 defineComponent() 函数创建组件。使用数据、方法和生命周期钩子，即可定制组件行为。
Vue 组件的定义
Vue 组件是一种在 Vue.js 中重用代码的模块化单元。它们允许您将用户界面 (UI) 分解成更小的、可管理的部分，提高代码的可重用性和可维护性。
如何定义 Vue 组件
有两种主要方法来定义 Vue 组件：
立即学习“前端免费学习笔记（深入）”；
-
使用 options API：使用
Vue.extend()方法创建组件。 -
使用组合 API（Composition API）：使用
defineComponent()函数创建组件。
使用 options API 定义组件
Vue.extend({
name: 'MyComponent',
template: 'Hello, I am a Vue component!
'
});
使用组合 API 定义组件
const MyComponent = defineComponent({
template: 'Hello, I am a Vue component!
'
});定义组件的步骤
-
命名组件：使用
name属性为组件指定一个唯一的名称。 -
设置模板：使用
template属性定义组件的 HTML 结构。 -
使用数据、方法和生命周期钩子：可根据需要添加
data()、methods()和生命周期钩子。
使用组件
一旦定义了组件，您可以在 Vue 实例中使用它：
