Vue.js 中的组件是可重用的代码块，可封装特定功能或 UI 元素。定义组件的步骤包括： 1. 创建 JavaScript 文件。 2. 导入 Vue 库。 3. 定义组件选项，包括 data、template、methods 和 computed。 4. 注册组件。
如何定义 Vue 组件
在 Vue.js 中，组件是可重用的代码块，可以封装特定功能或 UI 元素。定义组件的方法如下：
1. 创建一个 JavaScript 文件
为组件创建一个 JavaScript 文件，例如 MyComponent.vue。
立即学习“前端免费学习笔记（深入）”；
2. 导入 Vue 库
在 JavaScript 文件的顶部导入 Vue 库：
import Vue from 'vue';
3. 定义组件选项
使用 Vue.extend() 方法定义组件选项，包括：
- data(): 定义组件数据
- template: 定义组件的 HTML 结构
- methods: 定义组件的方法
- computed: 定义组件的计算属性
例如：
const MyComponent = Vue.extend({
data() {
return {
message: 'Hello World!'
};
},
template: `{{ message }}
`,
methods: {
sayHello() {
alert(this.message);
}
}
});4. 注册组件
使用 Vue.component() 方法注册组件：
Vue.component('my-component', MyComponent);现在，可以在 Vue 实例中使用 my-component 组件了。
