vvv动态组件和keep-alive
<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script src="a.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data(){
return {
currentItem:'input-item'
}
},
methods:{
zmf(){
this.currentItem = this.currentItem === 'input-item'?'common-item':'input-item'
}
},
template:`
<keep-alive>
<component :is="currentItem"/>
</keep-alive>
<!-- <input-item v-show="currentItem === 'input-item'" /> -->
<!-- <common-item v-show="currentItem === 'common-item'" /> -->
<button @click="zmf">zmf</button>
`
})
app.component('input-item',{
template:`
<div>
input-item
</div>
`
})
app.component('common-item',{
template:`
<div>
common-item
</div>
`
})
const vm = app.mount('#root')
</script>
</html>
vvv动态组件和keep-alive的更多相关文章
- vuejs动态组件给子组件传递数据
vuejs动态组件给子组件传递数据 通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component> ...
- C++ 类的动态组件化技术
序言: N年前,我们曾在软件开发上出现了这样的困惑,用VC开发COM组件过于复杂,用VB开发COM组件发现效率低,而且不能实现面向对象的很多特性,例如,继承,多态等.更况且如何快速封装利用历史遗留的大 ...
- Hibernate学习---第五节：普通组件和动态组件
一.普通组件映射配置 1.创建组件类,代码如下: package learn.hibernate.bean; /** * 组件类 */ public class Phones { private St ...
- vue2入坑随记(二) -- 自定义动态组件
学习了Vue全家桶和一些UI基本够用了,但是用元素的方式使用组件还是不够灵活,比如我们需要通过js代码直接调用组件,而不是每次在页面上通过属性去控制组件的表现.下面讲一下如何定义动态组件. Vue.e ...
- Vue动态组件
前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...
- angular2 学习笔记 ( Dynamic Component 动态组件)
更新 2018-02-07 详细讲一下 TemplateRef 和 ViewContainerRef 的插入 refer : https://segmentfault.com/a/1190000008 ...
- Vue两种组件类型介绍：递归组件和动态组件
一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身.值得注意的它必须设置name属性. // 递归组件 recursive.vue <template> < ...
- vue动态组件切换（选项卡）
vue的动态组件 <template :is='变量'></template> 可以通过改变变量,来改变template的替换内容.达到选项卡的功能 如果想要切换保持不重新创建 ...
- Vue 组件&组件之间的通信 之 template模板引用与动态组件的使用
template模板引用 在component的template中书写大量的HTML元素很麻烦. Vue提供了<template>标签,可以在里边书写HTML,然后通过ID指定到组建内的t ...
- 详解vue组件的is特性：限制元素&动态组件
在vue.js组件教程的一开始提及到了is特性 意思就是有些元素,比如 ul 里面只能直接包含 li元素,像这样: <ul> <li></li> </ul&g ...
随机推荐
- FPGA MIG调试bug（二）
目标器件:复旦微FPGA:JFM7K325T8FCBGA676(对标Xilinx Kintex-7系的XC7K325T) 工程背景:送入FPGA的外部时钟为差分时钟,时钟送入FPGA后,经过PLL输出 ...
- unzip--离线安装
centos 7 查看系统版本 [root@localhost work]# cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) ...
- java之路总结
2019-12-5 20:50:47 2019-10-7 18:01:37 总结学习java的各种知识! 越努力,越幸运! 永远不要高估自己! 吃的苦中苦,方为人上人! java基础 java进阶 j ...
- 删除启动台（LaunchPad）残留的图标
忘记什么版本的时候以前在 "应用程序" 删除应用后,启动台自动更新删掉 不知道什么时候开始,直接在 "应用程序" 里删掉后,启动台居然不能删除了-- 10.13 ...
- Tiup离线安装TIDB集群4.0.16版本
环境:centos7.6 中控机:8.213.8.25(内网) 可用服务器8.213.8.25-8.213.8.29 一.准备 TiUP 离线组件包 方法1:外网下载离线安装包拷贝进内网服务器 在Ti ...
- Linux 下查看mysql 加载的配置文件， 并且解决报错 “this is incompatible with sql_mode=only_full_group_by”
# 查看命令地址 which mysql /usr/local/mysql/bin/mysql # 查看配置文件地址 /usr/local/mysql/bin/mysql --verbose --he ...
- angular 路由守卫Observable异步请求串联
假设路由守卫有这种场景 需要使用observable同时发送多个Http 请求,判断request2返回的数据中是否存在request1返回的数据 使用async await export class ...
- ps如何正确擦除文字 如何正确用ps擦除文字
1.启动PS:新建文档,进入到软件操作界面中. 2.再把图片素材拖入到PS中.接下来,要把图片上的文字清除掉. 3.按L键,调出套索工具,接着,把文字给框选出来. 4.再按SHIFT+F5调出填充对话 ...
- Unity 保存截图功能
1.下面是实现代码 using System.Collections; using System.Collections.Generic; using UnityEditor; using Unity ...
- 一个好的程序应该像AK47
一个好的程序应该像AK47: 容易上手(配置.设置.功能描述清晰),结构简单(低耦合,模块化,单元化),拆装方便(安装部署.卸载.迁移很少有障碍),从不卡壳(已知业务冲突解决),故障率低(未知或可能出 ...