vue动态组件的用法
时间:2022-07-28
本文章向大家介绍vue动态组件的用法,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前文
今天写一篇关于vue组件的扩展用法, 之前将一些基本用法已经写过了,没有看过的可以自行找一下,今天要写的是一片关于vue 官方给的动态组件的一种用法,其实这个用法的使用场景使用基本组件也是可以胜任的,只是既然有这样一种写法的存在,我们还是需要实现一下,网上呢关于他的用法写的也有很多,我一般写的文章都是最基础的使用方法,没有一些花里胡哨的写法,所以很容易看得明白!废话不多说,上代码
目录结构
childA
<template>
<div>
{{msg}}
<el-checkbox>苹果</el-checkbox>
<el-checkbox>香蕉</el-checkbox>
<el-checkbox>橙子</el-checkbox>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'this is A'
}
}
}
</script>
<style>
</style>
childB
<template>
<div>
{{msg}}
<el-switch v-model="value" active-text="左边" inactive-text="右边">
</el-switch>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'this is B',
value: true
}
}
}
</script>
<style>
</style>
index
<template>
<div>
<el-button @click="showChild('A')">显示A组件</el-button>
<el-button @click="showChild('B')">显示B组件</el-button>
<keep-alive>
<component :is='currCom'></component>
</keep-alive>
</div>
</template>
<script>
import childA from '../childComponent/childA.vue'
import childB from '../childComponent/childB.vue'
export default {
components: {
childA,
childB
},
data() {
return {
currCom: childA
}
},
methods: {
showChild(Str) {
this.currCom = 'child' + Str
}
}
}
</script>
<style scoped="scoped">
/deep/ .el-button {
margin: 10px;
}
</style>
代码解析
上面三段就是实现了一个简单的动态组件的全部代码,childA组件是第一个子组件,childB组件是另一个子组件,我们引入组件的时候还是一样的import的方式,但是渲染的时候方式是直接使用component,使用:is来决定展示哪一个组件,这里使用keep-alive的原因呢,组件每一次渲染都是全新的,会导致一个现象就是之前用户的操作丢失,为了保证用户的操作的原本性,使用缓存的标签就可以了,效果如下:
效果
OVER
- Ajax上传图片以及上传之前先预览
- Spring Cloud中Hystrix的服务降级与异常处理
- Open vSwitch源码解析之基于VxLAN实现NSH解析功能
- Spring Cloud自定义Hystrix请求命令
- JavaScript面试问题:事件委托和this
- Spring Cloud中的断路器Hystrix
- js的隐含参数(arguments,callee,caller)使用方法
- Spring Cloud中的负载均衡策略
- Spring Cloud中负载均衡器概览
- 没有event loop的PHP
- RestTemplate的逆袭之路,从发送请求到负载均衡
- limit_area_cirle
- Spring RestTemplate中几种常见的请求方式
- 什么是客户端负载均衡
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法