第15集丨Vue 江湖 —— 组件

news2025/10/30 1:51:24

目录

  • 一、为什么需要组件
    • 1.1 传统方式编写应用
    • 1.2 使用组件方式编写应用
    • 1.3 Vue的组件管理
  • 二、Vue中的组件
    • 1.1 基本概念
      • 1.1.1 组件分类
      • 1.1.2 Vue中使用组件的三大步骤:
      • 1.1.3 如何定义一个组件
      • 1.1.4 如何注册组件
      • 1.1.5 如何使用组件
    • 1.2 注意点
      • 1.2.1 关于组件名
      • 1.2.2 关于组件标签
      • 1.2.3 一个简写方式
  • 三、非单文件组件
  • 四、组件的嵌套
    • 4.1 案例一
    • 4.2 案例二
  • 五、VueComponent()构造函数
    • 5.1 案例分析
    • 5.2 为什么每次调用Vue.extend，返回的是一个全新的VueComponent？
    • 5.3 vm管理vc
    • 5.4 vm和vc
  • 六、一个重要的内置关系
    • 6.1 显示/隐式原型属性、原型对象
    • 6.2 内置关系
    • 6.3 关系分析图
  • 七、单文件组件
    • 7.1 安装Vetur插件
    • 7.2 案例
      • 7.2.1 School.vue
      • 7.2.2 Student.vue
      • 7.2.3 App.vue
      • 7.2.4 main.js
      • 7.2.5 index.html

一、为什么需要组件

组件(Component)：用来实现局部(特定)功能效果的代码和资源的集合。

  • 代码：html/css/js
  • 资源：mp3/mp4/tff/zip...

1.1 传统方式编写应用

传统方式编写应用存在的问题：

  • 依赖关系混乱，引入的先后顺序，不好维护
  • 代码复用率不高。
    在这里插入图片描述

1.2 使用组件方式编写应用

使用组件方式编写应用，可以很好解决传统方式编写应用存在的问题。

在这里插入图片描述

1.3 Vue的组件管理

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。在这里插入图片描述

二、Vue中的组件

组件是可复用的 Vue 实例，因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

1.1 基本概念

1.1.1 组件分类

Vue中组件分为：非单文件组件、单文件组件

  • 非单文件组件：一个文件中包含有n个组件。a.html
  • 单文件组件：一个文件中只包含有1个组件。a.vue

1.1.2 Vue中使用组件的三大步骤:

  1. 定义组件(创建组件)
  2. 注册组件
  3. 使用组件(写组件标签)

1.1.3 如何定义一个组件

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样但也有点区别。区别如下:

  • el不要写，为什么?—最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
  • data必须写成函数,为什么?——避兔组件被复用时,数据存在引用关系(因为如果直接写一个对象，组件复用的时候共用一个对象，容易引起问题)。

备注：使用template可以配置组件结构。

1.1.4 如何注册组件

  • 局部注册：靠new Vue的时候传入components选项
  • 局注册：靠Vue.component('组件名',组件)

1.1.5 如何使用组件

编写组件标签，例如：<school></school>

1.2 注意点

1.2.1 关于组件名

一个单词组成：

  • 第一种写法(首字母小写)：school
  • 第二种写法(首字母大写)：School

多个单词组成:

  • 第一种写法(kebab-case命名)：my-school
  • 第二种写法(CamelCase大驼峰命名)：MySchool（需要Vue脚手架支持)

备注:

  • 组件名尽可能回避HTML中已有的元素名称，例如:h2、H2都不行。
  • 可以使用name配置项指定组件在开发者工具中呈现的名字。

推荐使用的命令：School和MySchool

1.2.2 关于组件标签

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

备注：不用使用脚手架时，写第一个<school/>渲染不会有问题，写超过一个<school/>的时候，会导致后续的<school/>组件不能渲染。

1.2.3 一个简写方式

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

简写的形式，其底层还是会自动调用Vue.extend()函数 。

三、非单文件组件

下面案例中，定义了三个组件：hello、school、student ，其中hello为全局组件，而school、student为局部组件。

在定义组件的时候注意点：

  • 不能使用el 配置项
  • data必须使用函数式，不能使用对象式
<div id="root">
    <h2>{{msg}}</h2>
    <!-- 编写组件标签 -->
    <school></school>
    <hr>
    <student></student>
    <student></student>
    
</div>
<div id="root2">
    <hello></hello>
</div>
<script>
    // 创建全局hello组件
    const hello = Vue.extend({
        template:`
            <div>
                <h2>我是全局{{name}}组件！</h2>
            </div>
        `,
        data() {
            return {
                name:'Hello'
            }
        },
    })
    // 全局注册组件
    Vue.component('hello',hello)
    
    // 创建School组件
    const school = Vue.extend({
        // el:'root', //不能写el配置项
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2> 
                <button @click="showName">点我显示学校名</button>
            </div>
        `,
        data() {
            return {
                schoolName: '南京大学',
                address: '江苏省南京市鼓楼区汉口路22号',
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
            }
        },
    })
    // 创建Student组件
    const student = Vue.extend({
        template:`
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data() {
            return {
                studentName: '令狐冲',
                age: 20
            }
        },
    })

    new Vue({
        data:{
            msg:'非单文件组件使用'
        },
        el: '#root',
        components: {
            school, //相当于school: school
            student
        }


    })
    
    new Vue({
        el:'#root2'
    })
</script>

在这里插入图片描述

四、组件的嵌套

4.1 案例一

<div id="root">
    <!-- 编写组件标签 -->
    <school></school>
    <hello></hello>
</div>

<script>

    // 创建Student组件
    const student = Vue.extend({
        template:`
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data() {
            return {
                studentName: '令狐冲',
                age: 20
            }
        },
    })

    // 创建School组件
    const school = Vue.extend({
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2> 
                <student></student>
            </div>
        `,
        data() {
            return {
                schoolName: '南京大学',
                address: '江苏省南京市鼓楼区汉口路22号',
            }
        },
        components:{
            student
        }
    })
    
    // 创建hello组件
    const hello = Vue.extend({
        template:`
            <div>
                <h2>我是{{name}}组件！</h2>
            </div>
        `,
        data() {
            return {
                name:'hello'
            }
        },
    })

    // 创建vm
    new Vue({
        el: '#root',
        // 局部注册组件
        components: {
            school, 
            hello
        }


    })
    
</script>

在这里插入图片描述

4.2 案例二

<div id="root">
    <!-- <app></app> -->
</div>

<script>

    // 创建Student组件
    const student = Vue.extend({
        template:`
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data() {
            return {
                studentName: '令狐冲',
                age: 20
            }
        },
    })

    // 创建School组件
    const school = Vue.extend({
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2> 
                <student></student>
            </div>
        `,
        data() {
            return {
                schoolName: '南京大学',
                address: '江苏省南京市鼓楼区汉口路22号',
            }
        },
        components:{
            student
        }
    })
    
    // 创建hello组件
    const hello = Vue.extend({
        template:`
            <div>
                <h2>我是{{name}}组件！</h2>
            </div>
        `,
        data() {
            return {
                name:'hello'
            }
        },
    })

    // 创建app组件
    const app = Vue.extend({
        template:`
            <div>
                <school></school>
                <hello></hello>
            </div>
        `,
        components:{
            school,
            hello
        }
    })

    // 创建vm
    new Vue({
        template:`<app></app>`,
        el: '#root',
        // 局部注册组件
        components: {
            app
        }


    })
    
</script>

在这里插入图片描述

五、VueComponent()构造函数

5.1 案例分析

下面案例中打印了school 组件。

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

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

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

  4. 关于this指向:

    • 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】
    • new Vue()配置中:data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。

  5. VueComponent的实例对象，以后简称vc（也可称之为:组件实例对象)
    vue的实例对象,以后简称vm。

// 创建School组件
const school = Vue.extend({
   template:`
       <div>
           <h2>学校名称：{{schoolName}}</h2>
           <h2>学校地址：{{address}}</h2> 
       </div>
   `,
   data() {
       return {
           schoolName: '南京大学',
           address: '江苏省南京市鼓楼区汉口路22号',
       }
   },
})
console.log(school)

在这里插入图片描述

5.2 为什么每次调用Vue.extend，返回的是一个全新的VueComponent？

打开源码，查看Vue.extend()函数定义，可以发现其最终返回的sub ,由此可见每次调用返回的都是一个全新的VueComponent() 函数

在这里插入图片描述

5.3 vm管理vc

打开控制台，输出vm，可以发现在vc存储在$children属性上。

在这里插入图片描述

5.4 vm和vc

vm和vc不一样.

  • 创建vc的时候，不能写el，vm可以
  • vc的data必须写成函数式，vm可以是对象式

六、一个重要的内置关系

6.1 显示/隐式原型属性、原型对象

显示原型属性、隐式原型属性指向同一个对象：原型对象

function Person(name) {
    this.name = name
}
const person = new Person('张三');

// 显示原型属性
console.log(Person.prototype);

// 隐式原型属性
console.log(person.__proto__);

// 显示原型属性、隐式原型属性指向同一个对象：原型对象
console.log(Person.prototype === person.__proto__); //true

Person.prototype.age = 25;
console.log(person.age); //25

6.2 内置关系

一个重要的内置关系：VueComponent.prototype._proto_=== Vue.prototype

为什么要有这个关系？是为了让组件实例对象（vc）可以访问到Vue原型上的属性、方法。

下面案例中，证明了这个重要的内置关系。即：school.prototype.__proto__ == Vue.prototype

<div id="root">
    <!-- 编写组件标签 -->
    <school></school>
</div>

<script>
    // 创建School组件
    const school = Vue.extend({
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2> 
            </div>
        `,
        data() {
            return {
                schoolName: '南京大学',
                address: '江苏省南京市鼓楼区汉口路22号',
            }
        },
    })
    // true
    console.log(school.prototype.__proto__  == Vue.prototype)
    // 创建vm
    new Vue({
        el: '#root',
        // 局部注册组件
        components: {
            school, 
        }


    })
    
</script>

6.3 关系分析图

Vue和VueComponent的关系分析图如下：

在这里插入图片描述

七、单文件组件

7.1 安装Vetur插件

在VSCode中安装Vetur插件.

在这里插入图片描述

安装完成后，输入<v 回车就会自动生成相关代码
在这里插入图片描述

7.2 案例

下面案例最终的目录结构如下：

在这里插入图片描述

7.2.1 School.vue

<template>
    <div class="demo">
        <h2>学校名称：{{ schoolName }}</h2>
        <h2>学校地址：{{ address }}</h2>
        <button @click="showName">点我显示学校名</button>
    </div>
</template>

<script>
export default {
    name: 'School',
    data() {
        return {
            schoolName: "南京大学",
            address: "江苏省南京市鼓楼区汉口路22号",
        };
    },
    methods: {
        showName() {
            alert(this.schoolName);
        },
    },
};
</script>

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

7.2.2 Student.vue

<template>
    <div>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
</template>

<script>
export default {
    name: 'Student',
    data() {
        return {
            name: "令狐冲",
            age: 20,
        };
    }
 
};
</script>

7.2.3 App.vue

<template>
   <div>
        <School></School>
        <Student></Student>
   </div> 
</template>

<script>
// 引入组件
import School from './School'
import Student from './Student'


export default {
    name: 'App',
    components:{
        School,
        Student
    }
};
</script>

7.2.4 main.js

import App from './App'

new Vue({
    el:'#root',
    template:`<App></App>`,
    comments:{
        App
    }
})

7.2.5 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <!-- <App></App> -->
    </div>
    <script src="../../lib/vue.js"></script>
    <script src="./main.js"></script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/885947.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

14.Linkedin在中国市场的主要竞争对手

14.Linkedin在中国市场的主要竞争对手

自Linkedin敲响了中国的大门之后,在国内市场也拥有了大量的用户。经过不断地发展了改革创新,更是成为了国内影响力比较大的职业社交平台之一。为了能够在国内市场中取得成功,在进入国内之前,Linkedin就采取了全新的模式,不仅仅是销售机构,也具备了产品技术、市场、公关等完整的…
阅读更多...
达芬奇无法播放视频，黑屏，不能预览画面

达芬奇无法播放视频，黑屏，不能预览画面

说一下其中一个原因&#xff0c;是因为用了像是xdisplay&#xff0c;super display这类软件&#xff0c;他们会安装一个显卡驱动而这个驱动就会导致这个问题。 方法很简单&#xff0c;在设备管理器里面&#xff0c;显示卡一览&#xff0c;卸载掉除了你的电脑显卡以外的虚拟显卡…
阅读更多...
webpack 从入门到放弃！

webpack 从入门到放弃！

webpack webpack于2012年3月10号诞生&#xff0c;作者是Tobias(德国)。参考GWT(Google Web Toolkit)的code splitting功能在webpack中进行实现。然后在2014年Instagram团队分享性能优化时&#xff0c;提出使用webpack的code splitting特性从而大火。 现在webpack的出现模糊了任…
阅读更多...
计算机视觉目标检测性能指标

计算机视觉目标检测性能指标

目录 精确率&#xff08;Precision&#xff09;和召回率&#xff08;Recall&#xff09; F1分数&#xff08;F1 Score&#xff09; IoU&#xff08;Intersection over Union&#xff09; P-R曲线&#xff08;Precision-Recall Curve&#xff09;和 AP mAP&#xff08;mean…
阅读更多...
Redis中使用lua脚本

Redis中使用lua脚本

微信公众号访问地址&#xff1a;Redis中使用lua脚本 推荐文章&#xff1a; 1、springBoot对接kafka,批量、并发、异步获取消息,并动态、批量插入库表; 2、SpringBoot用线程池ThreadPoolTaskExecutor异步处理百万级数据; 3、为什么引入Redisson分布式锁&#xff1f; 4、Redisso…
阅读更多...
60页数字政府智慧政务大数据资源平台项目可研方案PPT

60页数字政府智慧政务大数据资源平台项目可研方案PPT

导读&#xff1a;原文《60页数字政府智慧政务大数据资源平台项目可研方案PPT》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。 项目需求分析 项目建设原则和基本策略…
阅读更多...
C++之类之间访问函数指针(一百八十一)

C++之类之间访问函数指针(一百八十一)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…
阅读更多...
一、window配置微软商店中的Ubuntu，及错误解决方法

一、window配置微软商店中的Ubuntu，及错误解决方法

&#xff08;1&#xff09;首先&#xff0c;在微软商店中搜索“Ubuntu”&#xff0c;下载你喜欢的版本(此处) &#xff08;2&#xff09;设置适用于window的Linux子系统&#xff0c;跟着红色方框走 点击“确定”之后&#xff0c;会提示你重启电脑&#xff0c;按要求重启电脑即可…
阅读更多...
无涯教程-Perl - sub函数

无涯教程-Perl - sub函数

描述 此函数定义一个新的子例程。上面显示的参数遵循以下规则- NAME是子例程的名称。可以在有或没有原型规范的情况下预先声明命名的子例程(没有关联的代码块)。 匿名子例程必须具有定义。 PROTO定义了函数的原型,调用该函数以验证提供的参数时将使用该原型。 ATTRS为解析…
阅读更多...
管理类联考——逻辑——真题篇——按知识分类——汇总篇——一、形式逻辑——假言—公式化转换—等价+矛盾

管理类联考——逻辑——真题篇——按知识分类——汇总篇——一、形式逻辑——假言—公式化转换—等价+矛盾

文章目录 第一节　假言—公式化转换—等价矛盾真题&#xff08;2012—38&#xff09;—假言—A→B的公式化转换—A→B的等价命题&#xff1a;①逆否命题&#xff1a;非B→非A。真题&#xff08;2015—47&#xff09; —假言A→B的公式化转换—A→B的等价命题&#xff1a;①逆否…
阅读更多...
重新定义物化视图，你必须拥有的极速湖仓神器！

重新定义物化视图，你必须拥有的极速湖仓神器！

当今企业在进行数据分析时&#xff0c;面临着多重问题和挑战&#xff0c;而数据加工作为其中不可或缺的一环显得尤为重要。 首要的挑战在于数据加工的复杂性。从数据的产生到最终产生价值的整个链路仍然十分复杂&#xff0c;涉及多个环节和技术方案&#xff0c;这导致了技术复…
阅读更多...
Java培训机构出来的好找工作吗？有的人还是没有工资！

Java培训机构出来的好找工作吗？有的人还是没有工资！

Java培训机构出来的好找工作吗?为什么有的人找不到呢?事实上&#xff0c;参加Java培训机构并不是直接保证找到工作&#xff0c;而是提供了一定的学习和就业支持。以下是关于Java培训机构和就业的一些要点&#xff1a; 1.学习质量和教学内容 好的Java培训机构通常提供系统化、…
阅读更多...
设计模式 : 单例模式笔记

设计模式 : 单例模式笔记

文章目录 一.单例模式二.单例模式的两种实现方式饿汉模式懒汉模式 一.单例模式 一个类只能创建一个对象,这样的类的设计模式就称为单例模式,该模式保证系统中该类只能有一个实例(并且父子进程共享),一个很典型的单例类就是CSTL的内存池C单例模式的基本设计思路: 私有化构造函数…
阅读更多...
海外应用ASO优化的小技巧2

海外应用ASO优化的小技巧2

应用程序的名称可以表达很多内容&#xff0c;是应用程序元数据的重要组成部分&#xff0c;一个强大的标题可以识别应用中的潜在消费者&#xff0c;使得用户看名字就可以知道这个程序是做什么的&#xff0c;从而有助于转化率的提高。 1、详细的标题可以更好地帮助我们的软件。 …
阅读更多...
windows权限维持—黄金白银票据隐藏用户远控RustDeskGotoHttp

windows权限维持—黄金白银票据隐藏用户远控RustDeskGotoHttp

windows权限维持—黄金白银票据&隐藏用户&远控&RustDesk&GotoHttp 1. 前置1.1. 初始问题1.1.1. 解决办法 2. 隐藏用户2.1. 工具原理2.2. 案例操作2.2.1. 单机添加用户2.2.1.1. 工具添加用户2.2.1.2. 工具查看隐藏用户2.2.1.3. 本地查看隐藏用户 2.2.2. 域内添加…
阅读更多...
机器学习丨1. 机器学习概述

机器学习丨1. 机器学习概述

Author&#xff1a;AXYZdong 硕士在读 工科男 有一点思考&#xff0c;有一点想法&#xff0c;有一点理性&#xff01; 定个小小目标&#xff0c;努力成为习惯&#xff01;在最美的年华遇见更好的自己&#xff01; CSDNAXYZdong&#xff0c;CSDN首发&#xff0c;AXYZdong原创 唯…
阅读更多...
IT团队如何引领企业走向创造价值的新途径?

IT团队如何引领企业走向创造价值的新途径?

随着疫情结束带来的经济回暖&#xff0c;我们无疑已做好了更充分的准备。信息技术使许多企业能够在关门歇业的情况下继续运营&#xff0c;以防止大规模集会并强制执行社会隔离。得益于信息技术支持团队&#xff0c;许多企业能够动员其员工进行远程工作&#xff0c;有些甚至只需…
阅读更多...
C++ template 循环

C++ template 循环

在元编程循环中&#xff0c;我们不需要用while&#xff0c;for来循环&#xff0c;一般情况下都要用递归&#xff0c;例如&#xff1a; #include <iostream> using namespace std; template <int Head, int...Data> constexpr static int num Head num<Data..…
阅读更多...
企业类型的软件著作权证书申请，一次通过十几张

企业类型的软件著作权证书申请，一次通过十几张

大家好&#xff0c;我是小悟 关于软件著作权证书申请的内容&#xff0c;已经聊过很多次了&#xff0c;之前申请的都是个人类型&#xff0c;尝试了一下申请企业类型的&#xff0c;一口气提交了多张&#xff0c;也都顺利通过了。 其实个人和企业类型所需要的资料并没有什么差别&…
阅读更多...
flutter 常见的状态管理器

flutter 常见的状态管理器

flutter 常见的状态管理器 前言一、Provider二、Bloc三、Redux四、GetX总结 前言 当我们构建复杂的移动应用时&#xff0c;有效的状态管理是至关重要的&#xff0c;因为应用的不同部分可能需要共享数据、相应用户交互并保持一致的状态。Flutter 中有多种状态管理解决方案&#…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023