Vue 组件的写法汇总
在 Vue.js 中，组件化是为了方便代码复用，提高开发效率。今天我们将分享常见的 Vue 组件写法四种，非常不错，具有参考借鉴价值，需要的朋友可以参考下。
全局组件
全局组件是通过 Vue.component() 定义的，全局组件可以在任何 Vue 实例下使用。下面是一个简单的示例：
```javascript
Vue.component('componentName', {
template: '<div>组件的 HTML 结构</div>',
data() {
return {
// 组件中的属性
}
},
methods: {
// 组件中的方法
}
})
```
特点：
* 可以直接在 HTML 文件中的 script 标签内直接定义与使用
* 通过该方法定义的组件是全局组件，在任何 Vue 实例下都可以使用，适合项目比较简单的场景
* 每次定义组件时都要重新使用 Vue.component()，且组件名不能相同
局部组件
局部组件是通过定义一个组件对象，并通过 Vue 实例中 components 属性将该组件注册调用。下面是一个简单的示例：
```javascript
const componentName = {
template: '<div>组件的 HTML 结构</div>',
data() {
return {
// 组件中的属性
}
},
methods: {
// 组件中的方法
}
}
new Vue({
el: '#app',
components: {
componentName
}
})
```
特点：
* 与全局方式定义的组件相似，都可以直接在 HTML 文件中的 script 标签中直接书写组件与使用
* 只有在注册过的 Vue 实例中才能使用该组件
使用 template 标签
使用 template 标签可以将组件中的 HTML 结构写在 body 标签内部，在 script 标签内按照全局组件和局部组件的方式注册与使用。下面是一个简单的示例：
```html
<template id="component">
<!-- 组件的 HTML 结构 -->
</template>
<script>
Vue.component('componentName', {
template: '#component',
data() {
return {
// 组件中的属性
}
},
methods: {
// 组件中的方法
}
})
</script>
```
特点：
* js 文件中不包含 HTML 结构内容，实现结构与逻辑分离
单文件组件
单文件组件是将组件的 HTML 结构、JS 逻辑和 CSS 样式都写在一个文件中。下面是一个简单的示例：
```vue
<template>
<!-- 组件的 HTML 结构 -->
</template>
<script>
export default {
// 组件的属性和方法
}
</script>
<style scoped>
/* 组件的样式 */
</style>
```
特点：
* 组件与组件之间互不影响，复用性高，其 HTML、CSS、JS 均可复用
* 组件的结构、逻辑清晰
* 适用于大型复杂项目，适合多人开发
需要注意的是，template 标签内必须用一个标签将所有的标签包裹，否则会报错。正确的写法：<template> <div>...</div> </template>
Vue 组件的写法有多种，每种写法都有其特点和适用场景，选择合适的写法可以提高开发效率和代码复用性。
