在Vue中，组件是可复用的实例，它们定义了一种特别的Vue实例，可以把组件看作自定义的HTML元素。
- 全局注册
你可以像这样注册一个全局组件，这样你可以在任何其他组件内部使用这个组件：
Vue.component('my-component-name', {
// ... 选项 ...
})
- 局部注册
如果你想在单个组件中使用一个组件，你可以在那个组件的选项中注册：
export default {
components: {
'my-component-name': {
// ... 选项 ...
}
}
}
- 使用模板标签
你可以像这样使用你的组件：
<my-component-name></my-component-name>
- 使用is属性
如果你想要在一个通用的元素标签中使用组件，你可以使用is属性：
<div is="my-component-name"></div>
- 通过字符串模板
如果你有一个字符串模板，你可以这样使用组件：
Vue.component('my-component-name', {
template: '<div>A custom component!</div>'
})
- 通过
<script type="text/x-template">
你可以在HTML文件中定义模板，然后在Vue组件中注册和使用它：
<script type="text/x-template" id="my-component-template">
<p>This is a component!</p>
</script>
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('my-component', {
template: '#my-component-template'
})
new Vue({
el: '#app'
})
</script>
- 使用单文件组件
Vue单文件组件是一个.vue文件，它包含三个部分：模板、脚本和样式。
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data () {
return {
message: 'Hello World!'
}
}
}
</script>
<style>
div {
color: red;
}
</style>
- 组件的生命周期钩子
每个组件都有一个生命周期，它包含几个生命周期钩子，你可以在这些钩子中注册你想要的行为。例如，created钩子可以在组件创建后执行代码：
export default {
created() {
console.log('The component has been created!')
}
}
- 组件的数据
每个组件实例都有一个与之关联的数据对象。在组件的选项中，你可以通过data函数返回这个对象：
export default {
data() {
return {
message: 'Hello World!'
}
}
}
- 组件的props
你可以通过props向子组件传递数据。在子组件中，你可以像这样声明props：
export default {
props: ['myProp']
}
然后你可以像这样使用子组件：
<my-component-name :my-prop="value"></my-component-name>
- 组件的方法
你可以在组件的选项中定义方法，然后在模板中使用它们：