(二十)Vue之非单文件组件

news2025/7/9 13:13:16

文章目录

  • 基本使用
    • 一、如何定义一个组件?
    • 二、如何注册组件?
    • 三、如何使用组件?
    • 演示程序
      • 普通Vue程序
      • 单文件组件程序
        • 局部注册
        • 全局注册
  • 几个注意点
    • 1.关于组件名
    • 2.关于组件标签
    • 3.一个简写方式
  • 组件的嵌套使用
  • 关于VueComponent
  • 一个重要的内置关系(重点)
    • 回顾原型对象
    • 重要的内置关系

Vue学习目录

上一篇:(十九)Vue之组件和模块概念

基本使用

Vue中使用非单文件组件的三大步骤:

  • 一、定义组件(创建组件)
  • 二、注册组件
  • 三、使用组件(写组件标签)

一、如何定义一个组件?

使用Vue的API extend,传一个配置对象,这个配置项几乎和实例Vue一样,但也有点区别;
区别如下:

  • 1.el不要写,为什么? ——— 因为最终所有组件都要被一个vm管理,由vm决定服务于哪个容器。
  • 2.data必须写成函数,为什么? ———— 避免组件被复用时,数据存在引用关系。

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

二、如何注册组件?

1.局部注册:靠new Vue的时候传入components选项
2.全局注册:靠Vue.component(‘组件名’,组件)

三、如何使用组件?

<xxx></xxx>或<xxx/>,xxx是在component配置的组件名

演示程序

普通Vue程序

		<h2>学校名称:{{schoolName}}</h2>
        <h2>学校地址:{{address}}</h2>
        <hr>
        <h2>学生姓名:{{studentName}}</h2>
        <h2>学生年龄:{{age}}</h2>
	new Vue({
            el:'#root',
            data:{
                schoolName:'一中',
                address:'广州',
                studentName:'jack',
                age:20
            }
        });

效果:
在这里插入图片描述

单文件组件程序

局部注册

靠new Vue的时候传入components选项,特点是在哪个Vue实例注册的组件,就在哪个Vue实例使用

const school = Vue.extend({
            template:`
				<div class="demo">
					<h2>学校名称:{{schoolName}}</h2>
					<h2>学校地址:{{address}}</h2>
                    <button @click="showName">点我提示学校名</button>
                </div>
			`,
            data(){
                return{
                    schoolName:'一中',
                    address:'广州'
                }
            },
            methods:{
                showName(){
                    alert(this.schoolName)
                }
            }
        })
        //创建student组件
        const student = Vue.extend({
            template:`
				<div>
					<h2>学生姓名:{{studentName}}</h2>
					<h2>学生年龄:{{age}}</h2>
				</div>
			`,
            data(){
                return{
                    studentName:'jack',
                    age:20
                }
            }
        })
	new Vue({
            el:'#root',
            components:{//局部注册
                school,
                student
            }
        });

效果:
在这里插入图片描述

全局注册

靠Vue.component(‘组件名’,组件)注册组件,特点是如何一个Vue实例都可以使用
为了演示,新定义一个hello组件

    <div id="root">
        <!--编写组件标签-->
        <school></school>
        <hr>
        <student></student>
        <hr>
        <hello></hello>
    </div>
    <div id="root2">
        <hello></hello>
    </div>
        //hello组件
        const hello = Vue.extend({
            template:`
				<div>
					<h2>你好啊!{{name}}</h2>
				</div>
			`,
            data(){
                return {
                    name:'Tom'
                }
            }
        })

        //注册组件
        Vue.component('hello',hello)//全局注册
        new Vue({
            el:'#root',
            components:{//局部注册
                school,
                student
            }
        });    
        new Vue({
            el:'#root2',
        })

效果:
在这里插入图片描述

几个注意点

1.关于组件名

一个单词组成:

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

多个单词组成:

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

注意:

  • (1).组件名尽可能回避HTML中已有的元素名称,例如:h2、H2都不行。
  • (2).可以使用name配置项指定组件在开发者工具中呈现的名字。
    例如给上面组件都取个名字name:'xuexiao',
    效果:
    不取名字,正常以在component配置的组件名首字母大写呈现
    请添加图片描述
    取了名字,是以name所指定的名字首字母大写呈现
    在这里插入图片描述

2.关于组件标签

第一种写法:<school></school>
第二种写法:<school/>

注意:不用使用脚手架时,会导致后续组件不能渲染。

3.一个简写方式

因为Vue在components里遇到组件的时候会进行一个判断,如果直接是一个配置项,Vue会帮你补一个Vue.extend
例如:const school = Vue.extend(options) 可简写为:const school = options

组件的嵌套使用

组件可以发生嵌套,在众多嵌套关系当中,为了不产生混乱,一般都会受一个app组件进行引导,而vm就只需引导app组件即可

    <div id="root">
        <!--编写组件标签-->
        <hello></hello>
        <school></school>
    </div>
        //创建student组件
        const student = Vue.extend({
            template:`
				<div>
					<h2>学生姓名:{{studentName}}</h2>
					<h2>学生年龄:{{age}}</h2>
				</div>
			`,
            data(){
                return{
                    studentName:'jack',
                    age:20
                }
            }
        })
        //创建school组件
        const school = Vue.extend({
            template:`
				<div class="demo">
					<h2>学校名称:{{schoolName}}</h2>
					<h2>学校地址:{{address}}</h2>
                    <student></student>
                </div>
			`,
            data(){
                return{
                    schoolName:'一中',
                    address:'广州'
                }
            },
            components:{//注册组件
                student
            }
        })

        //定义hello组件
        const hello = Vue.extend({
            template:`<h1>{{msg}}</h1>`,
            data(){
                return {
                    msg:'欢迎学习Vue!'
                }
            }
        })
        //定义app组件
        const app = Vue.extend({
            template:`
				<div>
					<hello></hello>
					<school></school>
				</div>
			`,
            components:{
                school,
                hello
            }
        })
        //注册组件
        new Vue({
            template:'<app></app>',
            el:'#root',
            components:{//局部注册
                app
            }
        });

效果:
在这里插入图片描述

关于VueComponent

我们可以输出上面school组件console.log(school)
在这里插入图片描述
发现是一个VueComponent函数
我们去到源码,发现我们每次调用Vue.extend,都会实例一个VueComponent对象
请添加图片描述

  • 1.组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。
  • 2.我们只需要写<xxx/>或<xxx></xxx>,Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)。
  • 3.特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!!
  • 4.关于this指向:
  • (1).组件配置中:
    data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。
  • (2).new Vue(options)配置中:
    data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

一个重要的内置关系(重点)

回顾原型对象

什么是原型?

原型是Javascript中的继承的基础,JavaScript的继承就是基于原型的继承。

显示原型属性:

​在JavaScript中,我们创建一个函数A, 那么浏览器就会在内存中创建一个对象A,而且每个函数都默认会有一个属性 prototype 指向了这个对象( 即:A.prototype = 对象A )。这个对象A就是函数A的原型对象,简称函数的原型。这个原型对象A 默认会有一个属性 constructor 指向了这个函数A 。

隐式原型属性:

当把一个函数A作为构造函数使用new创建对象的时候赋值给B,浏览器同样在内存中创建一个对象A,那么这个对象B就会存在一个默认的不可见的属性__proto__,来指向了构造函数的原型对象A。同样这个原型对象A 默认会有一个属性 constructor 指向了这个函数A 。

        function Demo(){
            this.a = 1
            this.b = 2
        }
        //创建一个Demo的实例对象
        const d = new Demo()
        console.log(Demo.prototype) //显示原型属性
		console.log(d.__proto__) //隐式原型属性
		console.log(Demo.prototype === d.__proto__) //true

		//程序员通过显示原型属性操作原型对象,追加一个x属性,值为99
		Demo.prototype.x = 99

		console.log(d.x)
        Vue.prototype.x = 99

重要的内置关系

请添加图片描述
Vue的原型关系:跟普通的原型关系一样

  • Vue我们可以看作是一个函数,浏览器同样在内存中创建一个原型对象Vue,那么Vue.prototype => Vue的原型对象
  • 当我们实例Vue时,我们可以通过实例对象vm.__proto__ => Vue的原型对象
  • 由于所有原型对象默认是继承Object,所以Vue原型对象. __proto__ => Object的原型对象

VueComponent的原型关系:前两步是一样的,在VueCompont的原型对象的原型对象做出来重要的变化

  • VueComponent我们同样看作是一个函数,浏览器同样在内存中创建一个原型对象VueComponent,那么VueComponent.prototype => VueComponent的原型对象
  • 当我们实例VueComponent时,我们可以通过实例对象vc.__proto__ => VueComponent的原型对象
  • 原本VueCompont的原型对象的原型对象是Object的原型对象,但是Vue把这条线改成了:VueComponent.prototype.__proto__ === Vue.prototype(VueCompont的原型对象的原型对象 => Vue的原型对象),为什么要有这个关系:让组件实例对象(vc)可以访问到 Vue原型上的属性、方法。

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

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

相关文章

Shape详解

Spape详解 1.自定义背景shape 1.1gradient 1.简介 定义渐变色&#xff0c;可以定义两色渐变和三色渐变&#xff0c;及渐变样式&#xff0c;它的属性有下面几个2.属性 angle&#xff0c;只对线性渐变是有效的放射性渐变必须指定放射性的半径&#xff0c;gradientRadiouscentetX和…

Ubuntu安装redis服务器

官网下载redis服务器的压缩包redis-6.0.16.tar.gz 点击download 6.2.8或任意版本即可。 上传下载的压缩包到服务器或者本地虚拟机 解压压缩包&#xff0c;并安装gcc tar -zxvf redis-6.0.16.tar.gz解压之后可以看到redis的目录结构&#xff1a; 没有bin目录&#xff0c;而redi…

Meta CTO专访:2023年AR/VR、元宇宙的下一步怎么走

2022年对于Meta来说注定是不平凡的一年&#xff0c;它经历了股价大跌、万人大裁员、项目重组、季度营收首次下滑、Reality Labs季度亏损破纪录&#xff0c;甚至前不久Meta AR/VR业务的元老级人物、Reality Labs顾问CTO John Carck也宣布离职&#xff0c;这件事对于Meta甚至整个…

HEVC学习之CTU划分

一,CTU相关概念 H.265将图像划分为“树编码单元&#xff08;coding tree units, CTU&#xff09;”&#xff0c;而不是像H.264那样的1616的宏块。根据不同的编码设置&#xff0c;树编码块的尺寸可以被设置为6464或有限的3232或1616。 上图就是一个6464树编码块的分区示例&am…

数字ic验证|SoC的功能验证

随着设计的进行&#xff0c;越接近最后的产品&#xff0c;修正一个设计缺陷的成本就会越高。 1.功能验证概述 在IC设计与制造领域&#xff0c;通常所说的验证&#xff08;Verification&#xff09;和测试&#xff08;Test&#xff09;是两种不同的事 验证 在设计过程中确认…

PHP 实现PDF转图片

目录 1.环境配置&#xff1a; 2.实现原理&#xff1a; 3.安装php扩展imagick 4.安装ghostscript 5.pdf转图片 1.环境配置&#xff1a; 2.实现原理&#xff1a; Php使用扩展插件imagick进行图片处理&#xff0c;处理pdf时使用imagick去调用ghostscript 3.安装php扩展imag…

spring-boot如何自行写一个starter并且使用

这里说的starter是pom中引入的一系列starter包&#xff0c;比如spring-boot-starter-web、mybatis-plus-boot-starter等。本文先已mybatis-spring-boot-starter的使用进行说明&#xff0c;然后得到使用的流程&#xff08;套路&#xff09;&#xff0c;然后根据该流程&#xff0…

ddim原理及代码(Denoising diffusion implicit models)

前言 之前学习了 DDPM(DDPM原理与代码剖析)和 IDDPM(IDDPM原理和代码剖析)&#xff0c; 这次又来学习另一种重要的扩散模型。它的采样速度比DDPM快很多(respacing)&#xff0c;扩散过程不依赖马尔科夫链。 Denoising diffusion implicit models, ICLR 2021 理论 Astract和Int…

百果园通过港交所上市聆讯:八成营收来自加盟店,余惠勇为董事长

撰稿|汤汤 来源|贝多财经 近日&#xff0c;深圳百果园实业&#xff08;集团&#xff09;股份有限公司&#xff08;下称“百果园”&#xff09;通过港交所上市聆讯&#xff0c;并披露了聆讯后招股书。 根据招股书介绍&#xff0c;百果园是中国最大的水果零售经营商。根据弗若斯…

数据库实验6 存储过程实验

前言&#xff1a;游标的mysql代码不懂写&#xff0c;所以没有运行结果 实验6 存储过程实验 实验6.1 存储过程实验 1.实验目的 掌握数据库 PL/SQL 编程语言&#xff0c;以及数据库存储过程的设计和使用方法。 2.实验内容和要求 存储过程定义,存储过程运行,存储过程更名,存…

股票价、量走势图绘制

在证券投资分析领域中价、量走势分布图是投资者常用的一个参考方面。本案例主要介绍股票每日收盘价格、成交量的走势图以及月交易量分布饼图的绘制技能&#xff0c;并进一步介绍了子图的绘制方法。今有股票代码600000行情交易数据表&#xff08;trd.xlsx&#xff09;&#xff0…

SPDK线程模型

一、reactor线程 与传统的reactor线程模型相比&#xff0c;SPDK的reactor在功能实现上还是有很大区别的&#xff0c;线程不在基于流水线形式进行作业&#xff0c;而是采用Run-To-Complete来做运行处理。 如图所示&#xff0c;每个reactor线程会绑定一个cpu core&#xff0c;线…

力扣刷题笔记day7(数组中重复的数字+在排序数组中查找数字+0~n-1中缺失的数字)

文章目录数组中重复的数字题目思路代码在排序数组中查找数据题目思路代码0&#xff5e;n-1中缺失的数字题目思路代码数组中重复的数字 题目 思路 创建一个哈希表&#xff0c;将数组遍历&#xff0c;如果不存在则添加到哈希表中&#xff0c;如果存在则直接返回 代码 var fin…

电磁功率流和坡印廷矢量

回顾&#xff1a; 场源的影响周围的快慢取决于距离和传播速度 场源变化引起电磁波&#xff0c;电磁波传输能量 电磁能量的流动满足能量守恒定律 我们关心的是 体积V里面和体积外怎么交换能量&#xff0c;S是包围的闭合面 大家想一想&#xff0c;体积里面有场源 随着能量的…

Spring 中使用Nacos服务发现

引入依赖 <dependency><groupId>com.alibaba.nacos</groupId><artifactId>nacos-spring-context</artifactId><version>${latest.version}</version> </dependency>本文使用的版本为&#xff1a;1.1.1&#xff08;与Spring 中…

微服务(二)——注册中心(Eureka、Nacos)

目录1. 概念2. Eureka1. 服务搭建1. 依赖导入2. 配置文件3. 启动项目2. 服务注册1. 依赖导入2. 配置文件3. 启动多个实例3. 服务发现1. 依赖导入2. 配置文件3. 服务拉取和负载均衡4. 小结3. Ribbon1. 负载均衡流程2. 负载均衡策略3. 加载策略4. Nacos1. 下载安装2. 注册中心1. …

css:隐藏input file标签并触发点击上传文件事件

目录方式一&#xff1a;将input标签覆盖到按钮的最上层方式二&#xff1a;通过label标签触发点击事件方式三&#xff1a;js触发文件上传的点击事件总结通用的按钮样式 /* button样式来自element-ui */ .button {color: #fff;background-color: #409eff;display: inline-block;…

【MQTT】mqtt + go + M5Stack + SSR 远程灯控程序

1. mqtt服务搭建 参考上一篇文章【MQTT】mqtt 服务器部署--go 生产和消费demo_平静不绝望的博客-CSDN博客 2. M5stack 烧录和编程 详细文档&#xff1a;m5-docs mac 需要安装USB驱动 和 m5burner 如下图 3. flow ui 编程 SSR 4. go web远程代码 s.Router.HandleFunc(&…

UE中的FString操作

此篇是指单纯记录&#xff0c;方便之后查阅。 目录 创建 转型到FString FString转型到其他类型 字符串中是否包含指定串 查找给定串在其中是什么位置 字符串比较 读文件 裁剪字符串 编码解决的是文字问题 稍微细致一些的可以看&#xff1a; UE4随笔&#xff1a;FStri…

TI 2640 Quick start

&#xff08;1&#xff09;下载ccs 并且安装 &#xff08;2&#xff09;下载对应版本的SDK&#xff0c;并且安装 SDK对应版本下载可以通过搜索的方式&#xff1a;simplelink_cc2640r2_sdk_5_30_00_03 &#xff08;3&#xff09;导入对应的工程文件 此篇文档可以作为参考&#x…