Vue组件化开发,组件的创建,注册,使用,详解Vue,vm,VueComponent,vc

2023-11-04 07:30
文章标签 javascript 使用 组件 详解 开发 vue 创建 注册 vm frontend vc vuecomponent

本文主要是介绍Vue组件化开发,组件的创建,注册,使用,详解Vue,vm,VueComponent,vc，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

组件化开发

模块是指将一个大的js文件按照模块化拆分规则进行拆分成的每个js文件, 凡是采用模块方式开发的应用都可以称为模块化应用(组件包括模块)

传统方式开发的一个网页通常包括三部分: 结构(HTML)、样式(CSS)、交互(JavaScript)

  • 关系纵横交织复杂，牵一发动全身不利于维护
  • 代码复用率不高., 页面中复用的代码需要通过复制的方式在其他页面中使用

在这里插入图片描述

组件是实现应用中局部功能的代码(HTML,CSS,JS)和资源(图片,声音,视频)的集合,凡是采用组件方式开发的应用都可以称为组件化应用

  • 每一个组件都有独立的js,css以及HTML片段，这些独立的代码只供当前组件使用，不存在纵横交错问题便于维护
  • 代码复用性增强, 页面中复用的代码通过引入组件的方式在其他页面中使用

在这里插入图片描述

组件的创建

创建组件调用Vue.extend({该配置项和new Vue的配置项几乎相同只是略有差别})简写形式可省略Vue.extend()即{配置项}但底层在注册组件的时候还是会调用Vue.extend()静态方法,该方法的返回值是全新的VueComponent构造函数(函数类型的对象)不是构造函数的实例

  • template配置项: 使用template配置项配置模板语句,不能使用el配置项,因为组件具有通用性不特定为某个容器服务而是为所有容器服务
  • data配置项: data必须使用函数形式返回一个对象,不能使用对象的形式,因为对象数据是共享的只有一份,组件的数据是独立的不能共享
  • name配置项: 设置Vue开发者工具中显示的组件的名字但不是设置组件的名字(默认都是驼峰式显示)
<script>// 创建组件实例对象(结构HTML 交互JS 样式CSS)const myComponent = Vue.extend({template : `<ul><li v-for="(user,index) of users" :key="user.id">{{index}},{{user.name}}</li></ul>`,// 每次调用data方法都会返回一个对象,这个对象中的数据是独立的data(){return {users : [{id:'001',name:'jack'},{id:'002',name:'lucy'},{id:'003',name:'james'}]}}})// 创建组件时省略Vue.extend()
const myComponent = {template : `<ul><li v-for="(user,index) of users" :key="user.id">{{index}},{{user.name}}</li></ul>`,data(){return {users : [{id:'001',name:'jack'},{id:'002',name:'lucy'},{id:'003',name:'james'}]}}
}
</script>

注册组件进行管理

局部注册: 在创建Vue实例时使用配置项components:{组件的名字:组件对象},只能在父组件绑定的容器中或模板语句中使用,一般是在哪注册在哪使用

<body><!--容器1--><div id="app"><userlogin></userlogin></div><script>// 创建组件实例对象const myComponent = Vue.extend({template : `<ul><li v-for="(user,index) of users" :key="user.id">{{index}},{{user.name}}</li></ul>`,// 每次调用data方法都会返回一个对象,这个对象中的数据是独立的data(){return {users : [{id:'001',name:'jack'},{id:'002',name:'lucy'},{id:'003',name:'james'}]}}})// 在Vue实例中注册组件进行管理,实例vm根组件也是myComponent组件的父组件const vm = new Vue({el : '#app',data : {msg : '第一个组件'},// 局部注册的组件只能在父组件绑定的容器中使用,这里父组件就是vmcomponents : {// userlist是组件的名字,myComponent组件实例对象userlist : myComponent,}})</script>
</body>

全局注册: 调用Vue的静态方法Vue.component(组件的名字(标签名), 组件对象),可以在所有组件绑定的容器中或模板语句中使用

<body><!--容器1--><div id="app"><h1>{{msg}}</h1><userlogin></userlogin></div><!--容器2--><div id="app2"><userlogin></userlogin></div><script>// 创建组件const userLoginComponent = {// template只能有一个根元素template : `<div><h3>用户登录</h3><form @submit.prevent="login">账号：<input type="text" v-model="username"> <br><br>密码：<input type="password" v-model="password"> <br><br><button>登录</button></form></div>`,data(){return {username : '',password : ''}},methods: {login(){// this是vcalert(this.username + "," + this.password)}},}// 全局注册组件,自动调用Vue.extend()方法Vue.component('userlogin', userLoginComponent)// Vue实例const vm2 = new Vue({el : '#app2'})// Vue实例const vm = new Vue({el : '#app',data : {msg : '第一个组件'},})</script>
</body>

组件使用

使用组件在容器中中以HTML自闭合标签(组件起名有规范,不可以是HTML内置标签名)的方式使用,如果不在脚手架环境中使用这种方式除了第一个元素渲染后续元素都不会渲染

  • 第一种：全部小写
  • 第二种：首字母大写，后面都是小写
  • 第三种：kebab-case串式命名法(如user-login）
  • 第四种(常用)：CamelCase驼峰式命名法(UserLogin), 这种方式只允许在脚手架环境中使用
<!--在页面中以html标签的方式使用组件-->
<div id="app"><h1>{{msg}}</h1><userlist></userlist><userlist></userlist><userlist/>
</div>

组件嵌套(父子组件)

组件的划分粒度很重要，粒度太粗会降低组件的复用性, 为了让复用性更强,中Vue中创建的组件也支持父子组件嵌套使用

  • 子组件由父组件来管理，父组件由父组件的父组件管理, 在Vue中根组件就是Vue实例vm
  • 局部注册的子组件只能在父组件绑定的容器或者template配置项配置的模板语句中使用,一般是在哪注册在哪使用
    在这里插入图片描述
<body><div id="root"></div><script>// 创建Y1组件const y1 = {template : `<div><h3>Y1组件</h3></div>`}// 创建X1组件const x1 = {template : `<div><h3>X1组件</h3></div>`}// 创建Y组件const y = {template : `<div><h2>Y组件</h2><y1></y1></div>`,// 注册y1组件components : {y1}}// 创建X组件const x = {template : `<div><h2>X组件</h2><x1></x1></div>`,// 注册x1组件components : {x1}}// 创建app组件const app = {template : `<div><h1>App组件</h1><x></x><y></y></div>`,// 注册X组件,对象的属性名和属性值相同时可以省略属性值components : {x,y}}// vm根组件const vm = new Vue({el : '#root',template : `<app></app>`,// 注册app组件components : {app}})</script>
</body>

VueComponent & Vue

vm和vc的区别

new Vue({})配置项中的this是Vue实例vm(构造函数中的this指向新创建的对象), Vue.extend({})配置项中的this是VueComponent的实例vc

  • vm和vc拥有大量相同的属性和函数,但二者并不相同,只能说vm上有的vc上不一定有但vc上有的vm上一定有(vm上有el属性而vc上没有,vc的data必须是一个函数)

Vue.extend()源码: 因为Sub是个局部变量, 所以每一次调用Vue.extend方法返回的都是一个全新的VueComponent构造函数(构造函数也是类型即对应一个对象),并不是VueComponent构造函数的实例

  • 有了构造函数当Vue在解析组件标签时就会创建一个VueComponent实例,每个组件标签都对应一个VueComponent构造函数的实例
    在这里插入图片描述
<body><div id="app"><h1>{{msg}}</h1><user></user></div><script>// 创建组件const user = Vue.extend({template : `<div><h1>user组件</h1></div>`,mounted(){// this是VueComponent的实例,但user是一个全新的VueComponent构造函数(函数类型的对象)console.log('vc', this === user)//false}})// Vue实例const vm = new Vue({el : '#app',data : {msg : 'vm与vc'},components : {user},mounted() {// this是Vue实例console.log('vm', this)},})</script>
</body>

原型对象

XX的原型对象是一个所有对象实例共享的对象有且只有一个,获取原型对象有两种方式

  • prototype ：显示的原型属性(建议程序员使用的)，可以通过构造函数.prototype的方式获取原型对象
  • __proto__：隐式的原型属性(不建议程序员使用的)，可以通过对象实例.__proto__的方式获取原型对象

在这里插入图片描述

// 构造函数(函数本身也是一种类型，代表User类型有一个prototype属性）
function User(){}
// 通过User构造函数获取函数的原型对象
let x = User.prototype
// 通过User构造函数可以创建实例
let a = new User()
// 通过User构造函数的实例获取到实例原型对象
let y = a.__proto__
// 获取的是同一个原型对象
console.log(x === y) // true
// 给“User的原型对象”扩展属性,不是给User构造函数扩展属性
User.prototype.counter = 1000// 通过a实例可以访问到这个扩展的counter属性
// 访问原理：首先去a实例上找counter属性，如果a实例上没有counter属性的话，会沿着__proto__这个原型对象去找counter属性
console.log(a.counter)
//console.log(a.__proto__.counter)

vc,vm共享Vue原型对象

VueComponent.prototype.__proto__ = Vue.prototype: 这行代码实现了Vue,vm,VueComponent,vc都共享了同一个Vue的原型对象

  • Vue原型对象上有很多属性和方法如$mount()，对于组件VueComponent来说就不需要再额外提供了，直接使用vc调用$mount()即可，代码得到了复用<img 在这里插入图片描述
<body><div id="app"><h1>{{msg}}</h1><user></user></div><script>// 给“Vue的原型对象”扩展一个counter属性Vue.prototype.counter = 1000// 创建组件,调用Vue.extend()返回的是一个全新的VueComponent构造函数const user = Vue.extend({template : `<div><h1>user组件</h1></div>`,mounted(){// 通过this也就是vc可以访问到Vue原型对象上的属性console.log('vc.counter', this.counter)// msg是vm实例上的属性不是原型对象上的属性所以访问不了//console.log('vc.msg', this.msg)}})// user就是VueComponent构造函数console.log('user.prototype.__proto__ === Vue.prototype' , user.prototype.__proto__ === Vue.prototype)// true// Vue的实例const vm = new Vue({el : '#app',data : {msg : 'vm与vc'},components : {user},mounted() {// this是Vue实例console.log('vm', this)},})// vm实例可以直接访问原型对象的属性console.log('vm.counter', vm.counter)console.log('vm.counter', vm.__proto__.counter)</script>
</body>

这篇关于Vue组件化开发,组件的创建,注册,使用,详解Vue,vm,VueComponent,vc的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/344202。

相关文章

Python函数作用域示例详解

Python函数作用域示例详解

《Python函数作用域示例详解》本文介绍了Python中的LEGB作用域规则,详细解析了变量查找的四个层级,通过具体代码示例,展示了各层级的变量访问规则和特性,对python函数作用域相关知识感兴趣... 目录一、LEGB 规则二、作用域实例2.1 局部作用域（Local）2.2 闭包作用域（Enclos
阅读更多...
Linux中压缩、网络传输与系统监控工具的使用完整指南

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压：数据存储与传输的优化核心1. zip/unzip：通用压缩格式的便捷操作2.
阅读更多...
Python实现对阿里云OSS对象存储的操作详解

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os
阅读更多...
Java内存分配与JVM参数详解(推荐)

Java内存分配与JVM参数详解(推荐)

《Java内存分配与JVM参数详解(推荐)》本文详解JVM内存结构与参数调整,涵盖堆分代、元空间、GC选择及优化策略,帮助开发者提升性能、避免内存泄漏,本文给大家介绍Java内存分配与JVM参数详解,... 目录引言JVM内存结构JVM参数概述堆内存分配年轻代与老年代调整堆内存大小调整年轻代与老年代比例元空
阅读更多...
使用Python实现可恢复式多线程下载器

使用Python实现可恢复式多线程下载器

《使用Python实现可恢复式多线程下载器》在数字时代,大文件下载已成为日常操作,本文将手把手教你用Python打造专业级下载器,实现断点续传,多线程加速,速度限制等功能,感兴趣的小伙伴可以了解下... 目录一、智能续传：从崩溃边缘抢救进度二、多线程加速：榨干网络带宽三、速度控制：做网络的好邻居四、终端交互
阅读更多...
Python中注释使用方法举例详解

Python中注释使用方法举例详解

《Python中注释使用方法举例详解》在Python编程语言中注释是必不可少的一部分,它有助于提高代码的可读性和维护性,：本文主要介绍Python中注释使用方法的相关资料,需要的朋友可以参考下... 目录一、前言二、什么是注释？示例：三、单行注释语法：以 China编程# 开头，后面的内容为注释内容示例：示例：四
阅读更多...
mysql表操作与查询功能详解

mysql表操作与查询功能详解

《mysql表操作与查询功能详解》本文系统讲解MySQL表操作与查询,涵盖创建、修改、复制表语法,基本查询结构及WHERE、GROUPBY等子句,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随... 目录01.表的操作1.1表操作概览1.2创建表1.3修改表1.4复制表02.基本查询操作2.1 SE
阅读更多...
MySQL中的锁机制详解之全局锁,表级锁,行级锁

MySQL中的锁机制详解之全局锁,表级锁,行级锁

《MySQL中的锁机制详解之全局锁,表级锁,行级锁》MySQL锁机制通过全局、表级、行级锁控制并发,保障数据一致性与隔离性,全局锁适用于全库备份,表级锁适合读多写少场景,行级锁(InnoDB)实现高并... 目录一、锁机制基础：从并发问题到锁分类1.1 并发访问的三大问题1.2 锁的核心作用1.3 锁粒度分
阅读更多...
MySQL数据库中ENUM的用法是什么详解

MySQL数据库中ENUM的用法是什么详解

《MySQL数据库中ENUM的用法是什么详解》ENUM是一个字符串对象,用于指定一组预定义的值,并可在创建表时使用,下面：本文主要介绍MySQL数据库中ENUM的用法是什么的相关资料,文中通过代码... 目录mysql 中 ENUM 的用法一、ENUM 的定义与语法二、ENUM 的特点三、ENUM 的用法1
阅读更多...
MySQL count()聚合函数详解

MySQL count()聚合函数详解

《MySQLcount()聚合函数详解》MySQL中的COUNT()函数,它是SQL中最常用的聚合函数之一,用于计算表中符合特定条件的行数,本文给大家介绍MySQLcount()聚合函数,感兴趣的朋... 目录核心功能语法形式重要特性与行为如何选择使用哪种形式？总结深入剖析一下 mysql 中的 COUNT
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2