Vue2：收锣罢鼓（8）

锅挤2026-01-04 8:22

正如标题所说，对于我来说Vue2的学习进入尾声了。关于这次的尝试，这让我清晰地认识到，当前的学习只是一个起点。但是Vue2的内容是远远远远大于我这几天所学到的，这次窥探的一角让我体会到了前路漫漫，让我们保持好奇，保持耐心一起进步。

目录

组件简介

使用组件的三大步骤：

[1. 多文件组件](#1. 多文件组件)

注意事项：

组件嵌套

嵌套注意事项：

关于VueComponent：

[2. 单文件组件 (Single File Component - .vue 文件)](#2. 单文件组件 (Single File Component - .vue 文件))

结束

组件简介

组件的定义：实现应用中局部功能代码和资源的集合

Vue 2 组件是 Vue 应用的基本构建单元，它就像可以重复使用的自定义 HTML 元素。每个组件都包含自己的：

  • 模板（HTML 结构）

  • 逻辑（JavaScript 行为）

  • 样式（CSS 外观）

组件允许你将复杂的用户界面拆分成独立、可维护的小块，每个块都有自己的功能和样式。

使用组件的三大步骤：

一、定义组件(创建组件)

二、注册组件

三、使用组件(写组件标签)

1. 多文件组件

  • 是什么：将组件的不同部分拆分到多个文件中，然后通过引用或构建工具组合在一起

  • 特点：传统的前端开发方式，适合特定场景

html 复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>浅尝Vue2</title>
        <script type="text/javascript" src="./vue.js"></script>
    </head>

    <body>
        <div id="test">
            <!-- 第三步：使用组件 -->
            <person></person>
            <hr>
            <school></school>
        </div>
    </body>

    
    <script type="text/javascript">
        // 第一步：创建组件
        const person = Vue.extend({
            template:`
                <div>
                    <h1>姓名:{{name}}</h1>
                    <h1>年龄:{{age}}</h1>
                </div>`,
            data(){
                return{
                    name:'宇宙暴龙战士',
                    age:18,
                }
            }        
        })

        const school = Vue.extend({
            template:`
                <div>
                    <h1>学校名称:{{school}}</h1>
                    <h1>学校地址:{{address}}</h1>
                </div>`,
            data(){
                return{
                    school:'霍格沃兹技术学院',
                    address:'吉吉国'
                }
            }            
        })
        // 第二步：注册组件
        new Vue({
            el:'#test',
            components:{
                //key(组件名，真正要去使用) ：value(前面暂时定义的名称)
                person:person,
                school:school
            }
        })
        
        // new Vue({
        //     el:"#test", 
        //     data:{
        //         name:'宇宙暴龙战士',
        //         age:18,
        //         school:'霍格沃兹技术学院',
        //         address:'吉吉国'
        //     }
        // })
    </script>
</html>

注意事项：

  1. 创建组件时，不用指定为谁服务比如 el 配置项，应为最终的组件都要通过Vue来管理，Vue来决定放到哪里为谁服务。简单来说，组件只是一块砖，哪里需要哪里搬。

  2. data必须写为函数式，者在之前的一篇文章刚介绍data时提到过，Vue2：愈陷愈深（2）。在这里可以详细解释了，其主要目的是确保每个组件实例都有自己的独立数据副本，避免组件复用时的数据污染问题。当组件定义中使用对象字面量作为 data 时，所有通过该组件创建的实例都会共享同一个数据对象。这意味着：

  • 修改一处，处处生效：一个组件实例修改数据，会影响到所有其他使用同一组件的实例

  • 数据互相干扰：组件之间会意外地共享状态，导致难以调试的 bug

  • 违背组件独立性原则：组件应该是独立、可复用的单元

3.关于组件名：

(1). 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。

(2). 可以使用name配置项指定组件在开发者工具中呈现的名字。

4.关于组件标签 ：

第一种写法：<school></school>

第二种写法：<school>

备注：不使用脚手架时，<school/>会导致后续组件不能渲染。

5.一个简写方式：

const school = Vue.extend(options) 可简写为：const school = options

组件嵌套

组件嵌套是指一个组件内部可以包含其他组件，形成父子关系或层级关系。这是构建复杂应用的基础，类似于俄罗斯套娃或树形结构，一个组件内部可以包含多个子组件，子组件又可以包含自己的子组件。

html 复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>浅尝Vue2</title>
        <script type="text/javascript" src="./vue.js"></script>
    </head>

    <body>
        <div id="test">
            <!-- 第三步：使用组件 -->
            <school></school>
        </div>
    </body>

    
    <script type="text/javascript">
        // 第一步：创建组件
        const person = Vue.extend({
            template:`
                <div>
                    <h1>姓名:{{name}}</h1>
                    <h1>年龄:{{age}}</h1>
                </div>`,
            data(){
                return{
                    name:'宇宙暴龙战士',
                    age:18,
                }
            }        
        })

        const school = Vue.extend({
            template:`
                <div>
                    <h1>学校名称:{{school}}</h1>
                    <h1>学校地址:{{address}}</h1>
                    <person></person>
                </div>`,
            data(){
                return{
                    school:'霍格沃兹技术学院',
                    address:'吉吉国'
                }
            }   ,
            components:{
                person
            }         
        })
        new Vue({
            el:'#test',
            components:{
                school:school
            }
        })

    </script>
</html>

嵌套注意事项：

  1. 注册关系

  • 在父组件的 components 选项中注册子组件

  • 这种注册只在父组件内部有效（局部注册）

  • 子组件在父组件的模板中才能使用

  1. 模板使用

  • 父组件在模板中使用子组件标签

  • 可以像使用普通 HTML 元素一样使用子组件

  1. 作用域隔离

  • 每个组件都有自己的独立作用域

  • 父组件不能直接访问子组件的数据和方法

  • 子组件也不能直接访问父组件的数据和方法

关于VueComponent：

  1. school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

  2. 我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。

  3. 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！

  4. 关于this指向：

    (1). 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue】；

    (2). new Vue()配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue】。

  5. VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。

    Vue的实例对象，以后简称vm。

2. 单文件组件 (Single File Component - .vue 文件)

  • 是什么 ：将组件的模板（HTML）、逻辑（JavaScript）和样式（CSS）全部封装在一个以 .vue 为扩展名的文件中

  • 特点：Vue 官方推荐的组件组织方式

一个标准的 .vue 文件包含三个部分：

  1. 模板部分 (template)

  • 使用 HTML 语法编写组件的 UI 结构

  • 只能有一个根元素

  • 支持 Vue 的所有模板语法（指令、插值、事件等）

  1. 脚本部分 (script)

  • 使用 JavaScript 或 TypeScript 编写组件逻辑

  • 导出组件的配置对象

  • 包含 data、methods、computed、生命周期钩子等

  1. 样式部分 (style)

  • 使用 CSS 或预处理器（如 SCSS、Less）编写样式

  • 可以添加 scoped 属性实现样式作用域隔离

  • 支持多个 <style> 块

示例的结构如下图所示，OK跟随脚步看看他的调用步骤

首先来到index.html

html 复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>testtset</title>
    </head>

    <body>
        <div id="root"></div>
        <script type="test/javascript" src="./vue.js"></script>
        <script type="test/javascript" src="./main.js"></script>
    </body>

    
    <script type="text/javascript">

    </script>
</html>

看到引用main.js,来到main.js

html 复制代码 
import App from './App.vue'

new VTTCue({
    el:"#root",
    template:`<App></App>`,
    components:{App},

})

引入了App.vue

html 复制代码 
<template>
    <div>
        <school></school>
        <person></person>
    </div>
</template>

<script>
    //引入别的组件:school、person
    import school from './school.vue';
    import person from './person.vue';

    export default {
        name:'App',
        components:{
            school,
            person
        }
    }
</script>

<style>

</style>

这里又引入了school.vue和person.vue

html 复制代码 
<template>
    <div class="demo">
        <h1>学校名称:{{school}}</h1>
        <h1>学校地址:{{address}}</h1>
    </div>
</template>

<script>
    const school = Vue.extend({
        data(){
            return{
                school:'霍格沃兹技术学院',
                address:'吉吉国'
            }
        }
    })
    export default school
</script>

<style>
    .demo{
        background-color: black;
    }
</style>
html 复制代码 
<template>
    <div class="demo">
        <h1>姓名:{{name}}</h1>
        <h1>年龄:{{age}}</h1>
    </div>
</template>

<script>
    const person = Vue.extend({
        data(){
                return{
                    name:'宇宙暴龙战士',
                    age:18,
                }
            }
    })
    export default person
</script>

<style>
    .demo{
        background-color: blue;
    }
</style>

最后，创建脚手架就可以成功运行啦

结束

通过这几天的学习让我明白：技术学习不是终点，而是起点。 每一个新知识点的掌握都像是打开了一扇门，门后还有更广阔的天地等待探索。保持好奇，保持耐心 - 前端技术的发展日新月异，只有持续学习才能跟上时代的步伐

相关推荐
阿湯哥几秒前
Design Token 详解
前端
json{shen:"jing"}5 分钟前
08_组件基础
前端·javascript·vue.js
嚣张丶小麦兜7 分钟前
docker的简单应用
前端·docker
菩提祖师_10 分钟前
基于VR的虚拟会议系统设计
开发语言·javascript·c++·爬虫
Erishen18 分钟前
🚀 重新定义前端组件安装体验：shadcn + Bun 的极致开发效率
前端
冬奇Lab19 分钟前
Vercel部署全攻略:从GitHub到上线,10分钟让你的前端项目免费拥有自己的域名
前端·后端·node.js
牛马11121 分钟前
Flutter Web性能优化标签解析
前端·flutter·性能优化
Bigger22 分钟前
Tauri (25)——消除搜索列表默认选中的 UI 闪动
前端·react.js·weui
hongkid30 分钟前
React Native 如何打包正式apk
javascript·react native·react.js
李少兄33 分钟前
简单讲讲 SVG：前端开发中的矢量图形
前端·svg
热门推荐
01GitHub 镜像站点02手把手教你通过Gemini3 pro 学生认证，白用一年，手慢无！03安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）04jdk21下载、安装（Windows、Linux、macOS）05Linux下V2Ray安装配置指南062025 最新教程：注册并切换到美区 Apple ID07Claude Code Skills 实用使用手册08GitLab 零基础入门指南：从安装到项目管理全流程09UV安装并设置国内源10Labelme从安装到标注：零基础完整指南