Vue.js 组件注册
1.前言
- 本节讲述组件和2.x版本和3.x版本的注册方式
2.全局注册
- 2.x版本直接调用Vue.component()方法进行全局注册，所有Vue实例都能使用，包括其组件
//组件代码省略
var someComponent = {}
Vue.component('some-component',someComponent)
- 3.x版本全局注册从语法调用层面就可以看出，只能针对当前Vue实例以及其组件，这里与2.x是有区别的
var some_component = {
'template':"<h3>我是组件</h3>",
}
var app = Vue.createApp({
data() {
return {
msg: "实例1",
}
},
})
//全局注册？ 只能用于当前实例和其组件
app.component('some-component', some_component)
app.mount('#app')
//这个实例不能直接调用上面的 some_component 组件
var app2 = Vue.createApp({
data() {
return {
msg: "实例2",
}
},
})
3.局部注册
- 2.x和3.x都是通过配置component字段进行注册，只能在当前实例中使用，其子组件中不得使用
//组件
var some_component = {
'template':"<h3>子组件</h3>",
}
new Vue({
el:"#app",
data(){
return {
}
},
components:{
'some-component':some_component,
}
})
var some_component = {
'template':"<h3>我是组件</h3>",
}
var app = Vue.createApp({
data() {
return {
msg: "实例1",
}
},
components:{
'some-component':some_component,
}
})
app.mount('#app')
4.动态组件
- 通过component标签的中使用 is 属性 来切换不同的组件，is属性值对应组件注册是的组件名称(string)
//核心代码
<component :is="currentTabComponent"></component>
<body>
<div id="app" v-cloak>
<div>
<button @click="toggleComponent">切换组件</button>
</div>
<div>
<component :is="active_component"></component>
</div>
</div>
</body>
<script>
//组件1
var some_component = {
'template':"<h3>子组件</h3>",
}
//组件2
var some_component2 = {
'template':"<h3>子组件2</h3>",
}
new Vue({
el:"#app",
data(){
return {
//默认是 组件1
active_component: some_component,
component_index:0
}
},
components:{
'some-component':some_component,
'some-component2':some_component2
},
methods:{
toggleComponent(){
if(this.component_index == 0){
this.active_component = 'some-component2'
this.component_index = 1
}else{
this.active_component = 'some-component'
this.component_index = 0
}
}
}
})
</script>
- 组件缓存：组件在切换时，默认会丢失缓存数据，可以使用keep-alive标签将其包裹起来，使其状态和数据得以缓存
<!-- 失活的组件将会被缓存！-->
<keep-alive>
<component :is="active_component"></component>
</keep-alive>
//组件1
var some_component = {
'template':"<input type='text'></input>",
}
//组件2
var some_component2 = {
'template':"<input type='text'></input>",
}
5.异步组件基础
- 组件从数据类型来说其实就是一个对象，其注册的步骤一般为：先下载组件资源（组件的相关代码文件js），再执行Vue.use()进行组件注册
- 异步组件就是先进行组件注册，等需要渲染这个组件时，再下载对应的组件资源，这样的做法是为了节省资源，即需要渲染哪个组件时再去下载组件资源
- 同步组件和异步组件的注册方法是一致的，作为区分的是：同步组件的值其实是一个对象，而异步组件是一个函数，这个函数在2.x和3.x中有些区别
- 2.x的异步组件:把组件的值设置成一个function，等第一次渲染这个组件时（后续切换不会重复执行），这个方法就会执行，在这个方法中通过ajax获取组件代码后执行resolve()方法
Vue.component('async-example', function (resolve, reject) {
//组件第一次渲染会执行这里的代码
//使用定时器模拟ajax请求
setTimeout(function () {
//模拟后台返回的组件代码
var component_code = {
template: '<div>I am async!</div>'
}
//执行resolve 传入组件代码
resolve(component_code)
}, 1000)
})
- 3.x使用专用的方法Vue.defineAsyncComponent()来定义一个异步组件，此方法接受一个返回 Promise 的工厂函数，在这个工厂函数中通过ajax获取组件代码后执行resolve()方法
const async_example = Vue.defineAsyncComponent(
//接收一个函数，这个函数返回一个promise
() => {
return new Promise((resolve, reject) => {
//组件渲染后执行这里的代码
console.log('模拟ajax请求')
//使用定时器模拟ajax请求
setTimeout(function () {
//模拟后台返回的组件代码
var component_code = {
template: '<div>I am async!</div>'
}
//执行resolve 传入组件代码
resolve(component_code)
}, 1000)
})
}
)
var app = Vue.createApp({
data() {
return {
msg: "实例1",
//默认是 组件1
flag: false,
}
},
components: {
"async-example": async_example
},
methods: {
toggleComponent() {
this.flag = !this.flag
}
}
})
app.mount('#app')
6.异步组件应用
- 在非脚手架项目中，异步组件意义不大，因为自定义的组件都是按单文件组件 (SFC) 规范来编写的，通过ajax获取其代码后还要经过编译，这个编译需要专门的插件来完成（httpVueLoader），上面的例子只为了解底层的运作原理，需要用到异步组件时，基本上都是脚手架模式
- 脚手架模式中，如果组件被定义成异步组件，会将其打包成一个js文件，激活此组件时，页面会加载这个js文件
- 2.x脚手架项目异步组件使用方法：在箭头函数中使用import引入组件文件
components: {
"async-example": () => import('@/components/async-example.vue')
},
- 3.x脚手架项目异步组件使用方法：引入并调用defineAsyncComponent()方法，传入箭头函数，使用import引入组件文件
import { defineAsyncComponent } from 'vue'
components: {
"async-example": defineAsyncComponent(()=> import('@/components/async-example.vue'))
},
Vue.js 组件注册的更多相关文章
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- 浅尝Vue.js组件(一)
本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...
- Vue.js 组件的三个 API：prop、event、slot
组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- Vue.js 组件编码规范
本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...
- Vue.js组件的重要选项
Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...
- Vue.js组件学习
组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...
- Vue.js组件示例
一 外部引入文件:(全局注册) //建模版 var mycomponent=Vue.extend( {template:"<div><a href='#'>我爱Jav ...
- Vue.js组件之同级之间的通信
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- qumu虚拟机启动后无法远程连接
通过 virsh 在启动 qemu 虚拟机,可以通过 VNC 访问虚拟机,但无法通过设置的 SSH 的外部映射端口登录.首先在宿主机上查看虚拟机(csv\tpm\name)的网络配置,可以看到端口映射 ...
- .net core8 使用JWT鉴权（附当前源码）
说明 该文章是属于OverallAuth2.0系列文章,每周更新一篇该系列文章(从0到1完成系统开发). 该系统文章,我会尽量说的非常详细,做到不管新手.老手都能看懂. 说明:OverallAuth2 ...
- VMWARE 客户机 ARP 问题一则
最近测试自定义的 linux 镜像,会在 vmware 里面反复安装.测试过程中,发现一个奇怪的现象,就是刚装好的虚拟机,要主动往外ping一下,才能被网络上其他主机连接上.否则就算是同一子网下的宿主 ...
- HOG算法的笔记与python实现
这两篇[1][2]博客写的都非常详细.这里做个笔记记录一下. HOG称为方向梯度直方图(Histogram of Oriented Gradient),主要是为了对图像进行特征提取.所以在传统目标检测 ...
- KubeSphere 社区双周报 | OpenFunction v1.0.0-rc.0 发布
KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书.新增的讲师证书以及两周内提交过 commit 的贡献者,并对近期重要的 PR 进行解析,同时还包含了线上/线下活动和布道推广等一系列 ...
- Machine Learning Week_5 Cost Function and BackPropagation
目录 0 Neural Networks: Learning 1 Cost Function and BackPropagation 1.1 Cost Function 1.2 Backpropaga ...
- 指针进阶（C语言终）
1. sizeof和strlen的对比 1.1 sizeof 在学习操作符的时候,我们学习了sizeof , sizeof 计算变量所占内存内存空间大小的,单位是 字节,如果操作数是类型的话,计算的是 ...
- mysql文本数据导入
MySQL使用mysqlimport命令导入文本文件 MySQL中,可以使用mysqlimport命令将文本文件导入到MySQL数据库中.基本的语法格式如下: mysqlimport <dbna ...
- 全面解释人工智能LLM模型的真实工作原理（二）
前一篇:<全面解释人工智能LLM模型的真实工作原理(一)> 序言:在上一篇文章中,我们从原理上构建了一个识别"叶子"和"花朵"的神经网络,并详细讲解 ...
- DDCA —— 缓存(Cache)：缓存体系结构、缓存操作
1. 存储器层次(The Memory Hierarchy) 1.1 现代系统中的存储器 其中包括L1.L2.L3和DRAM 1.2 存储器的局限 理想存储器的需求如下: 零延迟 容量无限 零成本 带 ...