vue单文件组件实现
Vue 单文件组件实现
Vue 单文件组件（Single File Components，SFC）是 Vue.js 的核心特性之一，允许将模板、逻辑和样式封装在一个文件中，通常以 .vue 为扩展名。以下是实现 Vue 单文件组件的关键步骤和示例。
基本结构
一个典型的 Vue 单文件组件包含三个部分：<template>、<script> 和 <style>。
<template>
<div class="example">
{{ message }}
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
}
}
</script>
<style scoped>
.example {
color: red;
}
</style>模板部分
<template> 标签内包含组件的 HTML 结构，支持 Vue 的模板语法（如插值、指令等）。
<template>
<button @click="handleClick">Click me</button>
</template>脚本部分
<script> 标签内定义组件的逻辑，包括数据、方法、生命周期钩子等。推荐使用 export default 导出组件选项。
<script>
export default {
methods: {
handleClick() {
console.log('Button clicked');
}
}
}
</script>样式部分
<style> 标签内定义组件的样式。通过 scoped 属性可以限制样式仅作用于当前组件。
<style scoped>
button {
background-color: #42b983;
}
</style>使用组件
在其他组件或入口文件中，通过 import 引入并使用单文件组件。
<template>
<ExampleComponent />
</template>
<script>
import ExampleComponent from './ExampleComponent.vue';
export default {
components: {
ExampleComponent
}
}
</script>进阶功能
- Props 传递：通过
props接收父组件传递的数据。 - 插槽：使用
<slot>实现内容分发。 - 动态组件：通过
<component :is="currentComponent">动态切换组件。 - 自定义指令和过滤器：在
<script>中扩展功能。
工具链支持
- Vue CLI：快速搭建 Vue 项目，内置对单文件组件的支持。
- Vite：现代构建工具，支持快速开发 Vue 单文件组件。
- Webpack：通过
vue-loader处理.vue文件。
通过以上方式，可以高效地实现和维护 Vue 单文件组件。
