Vue单文件组件与组件风格
单文件组件
Vue 单文件组件(Single File Component,SFC)是 Vue.js 中的一种组件编写方式,它将一个完整的组件定义封装在一个单独的文件中,包括模板、脚本和样式。这种方式的主要优点是代码组织更加清晰,维护性更高,并且使得代码复用更加容易。
一个典型的 Vue 单文件组件通常包括以下三个部分:
- 模板(Template): 定义了组件的结构和布局,使用 HTML 标签和 Vue 模板语法编写。模板通常位于单文件组件的
<template>
标签中。 - 脚本(Script): 包含了组件的逻辑和行为,使用 JavaScript 编写。脚本通常位于
<script>
标签中,可以使用 ES6 模块化语法来导入其他模块或组件。 - 样式(Style): 包含了组件的样式信息,使用 CSS 或 CSS 预处理器(如 Sass、Less)编写。样式通常位于
<style>
标签中,可以使用 scoped 属性使得样式仅在当前组件中生效。
下面是一个 Vue 单文件组件MyComponent.vue
的示例:
1 | <template> |
在上面的示例中,
<template>
标签包含了组件的结构,<script>
标签包含了组件的逻辑,<style>
标签包含了组件的样式,并且使用了scoped
属性,使得样式仅在当前组件中生效。要在 Vue 项目中使用单文件组件,通常需要使用构建工具(如 Vue CLI 或 Webpack)来处理和打包这些组件。Vue 单文件组件的文件扩展名通常是
.vue
。
单文件组件的使用使得 Vue 项目的代码结构更加清晰和模块化,提高了开发效率和维护性。
单文件组件引用
假设你已经有一个 Vue 3 项目,或者你可以使用 Vue CLI 创建一个新项目。以下是一个示例项目结构:
1 | my-vue-project/ |
首先,确保你已经创建了
MyComponent.vue
单文件组件,并且在其中编写了你的组件内容,如上面提到的。这里的内容是:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<!-- MyComponent.vue -->
<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello from MyComponent!'
};
}
};
</script>
<style scoped>
/* 样式代码 */
</style>在
App.vue
组件或你需要的其他组件中,可以使用如下方式引入和使用MyComponent
:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<!-- App.vue -->
<template>
<div>
<h1>My Vue App</h1>
<my-component></my-component>
</div>
</template>
<script>
// 导入 MyComponent.vue 单文件组件
import MyComponent from './components/MyComponent.vue';
export default {
components: {
'my-component': MyComponent, // 注册 MyComponent 组件
}
};
</script>在
main.js
中,你可以创建 Vue 应用并将其挂载到一个 HTML 元素上:1
2
3
4
5// main.js
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');最后,在你的 HTML 文件中,添加一个 ID 为
app
的元素,用于挂载 Vue 应用:1
2
3
4
5
6
7
8
9
10<!-- public/index.html -->
<html>
<head>
<!-- ... -->
</head>
<body>
<div id="app"></div>
</body>
</html>
现在,当你启动你的 Vue 3 项目时,MyComponent
组件应该被正确引入和渲染在你的应用中。
Vue组件风格
Vue 组件可以按照两种不同的风格书写,分别是选项式 API(Options API)和组合式 API(Composition API)。这两种风格各有特点,开发者可以根据项目的需求和个人偏好选择其中一种或混合使用。
选项式 API(Options API)
这是 Vue 2.x 版本中使用的主要编写组件的方式。在选项式 API 中,一个组件通常由一个包含一系列选项的对象构成,例如 data
、methods
、computed
、watch
等。这种方式适用于较小规模的组件,将组件的不同选项按照功能划分,易于理解和维护。
示例代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 <!--CounterComponent.vue -->
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
methods: {
increment() {
this.count++;
},
},
};
</script>
在App.vue中引用注册组件
1 | <!-- App.vue --> |
export default
export default
是 JavaScript 模块系统中的语法,用于导出模块的默认成员。它通常用于一个模块中只导出一个主要的功能、类、函数或对象。
具体来说,export default
用于将一个值或对象作为模块的默认导出,这意味着其他模块在导入该模块时可以使用不同的语法引用它。
例如,假设你有一个名为 myModule.js
的模块,其中包含一个默认导出:
1 | // myModule.js |
然后,你可以在另一个模块中导入并使用它,可以选择为默认导出指定任何名称:
1 | // 可以为默认导出指定任何名称,这里使用 myFunction |
另外,你还可以使用通用的 *
导入来获取默认导出:
1 | import * as myModule from './myModule.js'; |
总之,export default
允许你在一个模块中指定默认导出,这样其他模块就可以更灵活地导入和使用它。
组合式 API(Composition API)
这是 Vue 3.x 版本引入的新的组件编写方式。组合式 API 提供了一种更灵活和功能性更强大的方式来组织组件的代码。它允许开发者将相关功能逻辑集中在一起,而不是按选项拆分,这有助于提高代码的可维护性和复用性。
代码示例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29<!--CounterComponent.vue -->
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
// 使用 ref 创建一个响应式对象
const count = ref(0);
// 创建一个方法来修改 count
const increment = () => {
count.value++;
};
// 返回 count 和 increment 函数
return {
count,
increment,
};
},
};
</script>
组合式 API 引入了 setup
函数,使得组件的逻辑可以更加灵活地组织,还引入了一些新的响应式函数(如 ref
、reactive
)来管理组件的数据状态。这种方式适用于大型、复杂的组件和项目,使得组件的开发更具可维护性。
导入引用组件
1 | <!--App.vue --> |
script setup
script setup
是 Vue 3.2.0+ 中引入的新语法糖,它的主要目的是简化组件的写法,尤其是对于功能较简单的组件。它可以替代传统的 script部分和 setup 函数。
例如上面的CounterComponent.vue组件使用script setup改写代码更加精简
1 | <!--CounterComponent.vue --> |
注意其中的主要区别是 <script setup>
消除了显式的 setup
函数声明,而且不需要手动导出选项,它提供了更简洁的语法来定义组件的响应式数据和方法。