啥是组件？
组件就是Vue应用中的小模块，可以重复使用的代码块。组件使得开发大型应用更加容易，因为你可以把代码分成多个小块，每个小块都负责特定的任务，就像搭乐高积木一样。
创建组件
在Vue中创建组件有两种方式：
- 注册组件
使用Vue.component()方法注册一个全局组件：
Vue.component('my-component', {
// 组件选项
// ...
})
- 局部注册组件
在某个Vue实例中注册一个局部组件：
new Vue({
el: '#app',
components: {
'my-component': MyComponent // 局部注册组件
}
})
使用组件
在模板中使用组件：
<template>
<div>
<my-component></my-component>
</div>
</template>
组件选项
- 模板选项
template：组件的HTML模板。可以包含其他组件和指令。注意，模板选项不能在全局注册时使用。
<template>
<div>
<p>{
{ msg }}</p> // 其他Vue选项或计算属性可以在组件的模板中使用。这里还能包含其他组件！
</div>
</template>
- 数据选项
data：组件的数据对象，可以包含任意数据。注意，数据选项不能在全局注册时使用。
<script>
export default {
data() {
// 使用函数定义异步获取数据！这在加载大型数据集合时特别有用！)
}
- 方法选项
methods：组件的方法，可以在组件的模板中调用。方法选项不能在全局注册时使用。
<script>
export default {
methods: {
greet() {
alert('Hello!')
}
}
}
</script>
- 计算属性选项
computed：组件的计算属性，可以在组件的模板中使用。计算属性选项不能在全局注册时使用。
<script>
export default {
data() {
return {
message: 'Hello'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>
- 事件选项
events：组件可以监听和触发的事件，可以在组件的模板中使用。事件选项不能在全局注册时使用。
<script>
export default {
events: {
click: 'greet' // 监听 click 事件，并在事件触发时调用 greet 方法。
},
methods: {
greet() {
alert('Hello!')
}
}
}
</script>
- 样式选项
styles：组件的样式，可以在组件的模板中使用。样式选项不能在全局注册时使用。样式可以包含其他CSS模块，例如less或sass。在样式选项中，可以使用&符号来引用组件的data数据。例如：color: &primaryColor;。
<script>
export default {
data() {
return {
primaryColor: 'blue'
}
},
styles: {
color: '&primaryColor' // 使用&来引用组件的数据对象中的primaryColor属性。
}
}
</script>
- 生命周期选项
lifecycle：组件的生命周期钩子函数，可以在组件的创建、更新、销毁等阶段调用。生命周期选项不能在全局注册时使用。下面是一些常见的生命周期钩子函数：created()：组件创建时调用；mounted()：组件挂载到DOM上时调用；updated()：组件更新时调用；destroyed()：组件销毁时调用。注意，这些钩子函数都是函数选项，而不是计算属性或方法选项。下面是一个例子：
<script>
export default {
created() {
// 组件创建时调用。可以在这时初始化一些状态或执行一些操作。例如，初始化一个定时
},
mounted() {
// 组件挂载到DOM上时调用。可以在这时执行一些与DOM操作相关的操作。例如，获取组件的DOM元素。
this.$refs.myElement // 获取组件的引用，例如：this.$refs.myElement.style.color = 'red';
},
updated() {
// 组件更新时调用。可以在这时执行一些与数据更新相关的操作。例如，重新计算某个属性的值。
// ...
},
destroyed() {
// 组件销毁时调用。可以在这时执行一些清理操作。例如，取消定时器或解绑事件监听器。
// ...
}
</script>
}