在上一篇中，我们讨论了如何创建简单的组件，了解了组件的基本结构和如何在主应用中注册和使用组件。在本章中，我们将深入探讨组件的基本选项，这些选项可以帮助我们更灵活地配置和管理组件的行为。
组件选项概述
在 Vue 组件中，我们可以通过一系列选项来定义组件的功能和表现。这些选项主要包括：
datapropscomputedmethodswatchmounted 等生命周期钩子
这些选项共同构成了一个完整的组件，使我们能够控制组件的状态、响应用户输入、处理数据变化等。
1. data 选项
data 选项用于定义组件的响应式数据。当我们在组件中定义数据时，使用一个函数返回一个对象是最佳实践。这样做可以确保每个组件实例都有自己的数据副本。
1
2
3
4
5
6
7
| Vue.component('counter', {
data() {
return {
count: 0
};
}
});
|
在这个示例中，我们定义了一个计数器组件，count 变量将会存储当前的计数值。
2. props 选项
props 选项用于接收来自父组件的数据。通过 props，子组件可以接收父组件传递的值，从而实现数据的单向流动。
1
2
3
4
5
6
| Vue.component('child', {
props: {
message: String
},
template: '<p>{{ message }}</p>'
});
|
在这个例子中，child 组件接收一个名为 message 的 prop，并在模板中展示它。
3. computed 选项
computed 选项用于定义计算属性。这些属性会根据组件的响应式数据进行计算，并在依赖的数据变化时自动更新。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| Vue.component('calculator', {
data() {
return {
price: 100,
quantity: 2
};
},
computed: {
total() {
return this.price * this.quantity;
}
},
template: '<p>Total: {{ total }}</p>'
});
|
在上面的例子中，total 是一个计算属性，它会乘以 price 和 quantity 数据，返回总价。
4. methods 选项
methods 选项用于定义组件的方法，这些方法可以在组件的模板或其它方法中被调用。
1
2
3
4
5
6
7
8
9
10
11
12
13
| Vue.component('button-counter', {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count += 1;
}
},
template: '<button @click="increment">Count: {{ count }}</button>'
});
|
在这个示例中，increment 方法会在按钮被点击时执行，从而增加计数。
5. watch 选项
watch 选项用于观察组件的数据变化，并在数据变化时执行特定的逻辑。这在处理复杂的数据变化时非常有用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| Vue.component('watcher', {
data() {
return {
question: '',
answer: '我还不知道，稍后告诉你'
};
},
watch: {
question(newQuestion) {
this.answer = '等待提问...';
setTimeout(() => {
this.answer = '你问的是：' + newQuestion + '，我也不知道';
}, 1000);
}
},
template: `
<div>
<p>问：<input v-model="question" /></p>
<p>答：{{ answer }}</p>
</div>
`
});
|
在这个例子中，watch 选项用于观察 question 的变化，以更新 answer。
6. 生命周期钩子
Vue 组件有几个生命周期钩子函数，可以让我们在特定的时间点执行代码。例如，mounted 钩子函数会在组件实例被挂载后立即调用。
1
2
3
4
5
6
7
8
9
10
11
| Vue.component('example-component', {
data() {
return {
message: '初始化信息'
};
},
mounted() {
console.log('组件已挂载');
},
template: '<p>{{ message }}</p>'
});
|
使用生命周期钩子，我们可以在组件渲染或销毁时执行一些逻辑，使组件更具灵活性。
总结
本章详细介绍了 Vue 组件的基本选项，包括 data、props、computed、methods、watch 和生命周期钩子。这些选项共同作用，使我们能够构建功能丰富的组件。在下一章中，我们将探讨组件的生命周期，了解如何在组件的不同阶段添加逻辑。
我们希望通过这些基本选项的学习，帮助大家更好地理解 Vue 组件的工作机制，为后续的复杂组件开发打下基础。