首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue组件之非单文件组件

Vue组件之非单文件组件用法及说明

2025-10-22 10:59:56 作者：tianzhiyi1989sq

本文系统介绍了Vue组件的概念、创建与命名规范、嵌套组织、核心原理及最佳实践,强调组件化开发可提升代码复用性和可维护性,并推荐在实际项目中使用单文件组件以优化开发体验和工程化水平

组件化是Vue.js最强大的特性之一，它允许我们将UI拆分为独立可复用的代码片段。

本文及后续几篇文章将全面解析Vue组件的各种概念和使用方法，通过丰富的实例演示组件开发的全过程，并提供最佳实践建议。

一、组件基础概念

1. 什么是组件？

组件是实现应用局部功能的代码和资源的集合，具有以下特点：

可复用：可以在多个地方重复使用
可组合：可以嵌套其他组件
独立：拥有自己的数据、模板和逻辑

2. 组件化 vs 模块化

特性	组件化	模块化
关注点	UI功能单元	JS功能单元
组成	包含HTML/CSS/JS	纯JS代码
复用级别	视图级别复用	逻辑级别复用
典型使用场景	构建用户界面	组织业务逻辑

二、非单文件组件

1. 基本使用步骤

1.1 创建组件

// 使用Vue.extend创建组件
const Company = Vue.extend({
  template: `
    <div>
      <h2>公司名称：{{name}}</h2>
      <h2>公司地址：{{address}}</h2>
    </div>
  `,
  data() {
    return {
      name: "Vue Company",
      address: "北京"
    }
  }
})

注意事项：

不要指定el选项
data必须使用函数形式返回对象
template定义组件结构

1.2 注册组件

// 全局注册
Vue.component('company', Company)

// 局部注册
new Vue({
  el: '#app',
  components: {
    'company': Company
  }
})

注意：组件名与定义的组件同名时可简写成components:{company},

'company'也可不带引号

1.3 使用组件

<div id="app">
  <company></company>
</div>

2. 组件命名规范

命名方式	示例	适用场景
kebab-case	my-company	所有场景，推荐HTML中使用
CamelCase	MyCompany	需要Vue脚手架支持，推荐JS中使用

注意事项：

避免与HTML原生标签冲突
多单词名称必须使用短横线或驼峰命名
可以使用name选项指定开发者工具中显示的名称

3. 组件标签写法

<!-- 完整写法 -->
<company></company>

<!-- 自闭合写法（需要脚手架支持） -->
<company/>

三、组件嵌套与组织

1. 组件嵌套示例

// 定义员工组件
const Employee = Vue.extend({
  template: `
    <div>
      <h3>员工姓名：{{name}}</h3>
      <h3>员工工号：{{id}}</h3>
    </div>
  `,
  data() {
    return {
      name: "张三",
      id: "1001"
    }
  }
})

// 定义公司组件（嵌套员工组件）
const Company = Vue.extend({
  template: `
    <div>
      <h2>公司名称：{{name}}</h2>
      <employee></employee>
    </div>
  `,
  components: {
    'employee': Employee
  },
  data() {
    return {
      name: "Vue Company"
    }
  }
})

// 定义App根组件
const App = Vue.extend({
  template: `
    <div>
      <company></company>
    </div>
  `,
  components: {
    'company': Company
  }
})

// 创建Vue实例
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

2. 组件树结构

Vue实例 (vm)
└── App (vc)
    └── Company (vc)
        └── Employee (vc)

四、组件核心原理

1. VueComponent构造函数

组件本质是VueComponent构造函数
由Vue.extend自动生成
每次调用Vue.extend都会返回全新的VueComponent

2. this指向问题

上下文	this指向
Vue实例配置	Vue实例对象 (vm)
组件配置	VueComponent实例 (vc)

3. vm与vc的重要区别

特性	Vue实例 (vm)	VueComponent实例 (vc)
el选项	支持	不支持
data形式	对象或函数	必须为函数
使用场景	根实例	可复用组件
生命周期	完整生命周期	无beforeCreate和created

五、最佳实践与建议

1. 组件设计原则

单一职责原则：每个组件只做一件事
松耦合：尽量减少组件间的依赖
高内聚：相关功能尽量放在同一个组件
可复用性：设计可配置的通用组件

2. 组件组织建议

合理划分组件层次结构
避免过深的嵌套（一般不超过3层）
公共组件放在全局注册
业务组件按功能模块组织

3. 性能优化

合理使用v-if和v-show控制组件渲染
使用keep-alive缓存不活跃的组件
大型组件考虑拆分为更小的子组件

六、从非单文件组件到单文件组件

非单文件组件适合简单场景，但在实际项目中，我们更推荐使用单文件组件(SFC)：

<!-- Company.vue -->
<template>
  <div>
    <h2>公司名称：{{name}}</h2>
    <employee></employee>
  </div>
</template>

<script>
import Employee from './Employee.vue'

export default {
  name: 'Company',
  components: {
    Employee
  },
  data() {
    return {
      name: "Vue Company"
    }
  }
}
</script>

<style scoped>
h2 {
  color: #42b983;
}
</style>

单文件组件优势：

更好的代码组织
支持预处理器
作用域CSS
更好的IDE支持

七、总结

Vue组件是构建现代Web应用的基石。通过本文我们了解了：

组件的基本概念和创建方式
组件的命名规范和使用方法
组件的嵌套和组织结构
组件的核心原理和实现机制
组件开发的最佳实践

掌握组件化开发能够显著提高代码的可维护性和复用性。在实际项目中，建议结合Vue CLI使用单文件组件，这将带来更好的开发体验和更高的工程化水平。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。