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 ...
随机推荐
- 关于xtr的一些基础
Q&A 如何找到QSEQ方式的xtt呢? 我们可以去版本的代码中寻找,具体位置在:(modem_proc/rf/rftarget_denali/mtp/xtt/etc/QSEQ/) 在QSEQ ...
- VUE学习-元素过渡
单元素过渡 appear 初始渲染 通过 appear attribute 设置节点在初始渲染的过渡 appear + css <transition appear appear-class=& ...
- 清除Linux登录记录
CentOS cat /dev/null > /var/log/wtmp cat /dev/null > /var/log/btmp cat /dev/null > /var/log ...
- MobaXterm激活专业版
本文思路来自 https://github.com/flygon2018/MobaXterm-keygen 有python 环境 并且不看英文的可以继续往下 不然直接访问这个地址也行. 1.需要一个大 ...
- spark2.0.1源码编译
一.编译源码步骤演示详解 . 编译spark环境要求 1.必须在linux系统下编译(以centos6.4为例) 2.编译使用的JDK版本必须是1.6以上(以JDK1.8为例) 3.编译需要使用Mav ...
- Pytest之生成allure报告
一.前戏 在之前我们已经学会使用 pytest-html 插件生成 html 格式的测试报告: 1 # 第一步,安装插件 2 pip install pytest-html 3 4 # 第二步,执 ...
- winform 容器内存泄漏
循环中释放容器时调用Dispose()方法会销毁对象,导致容器的个数变化. 正确示例//方法一for (int i = this.flowLayoutPanel1.Controls.Count-1; ...
- 关于certutil的探究-文件下载+编码分块上传上传文件再合并
何为certutil certutil.exe 是一个合法Windows文件,用于管理Windows证书的程序. 微软官方是这样对它解释的: Certutil.exe是一个命令行程序,作为证书服务的一 ...
- ENGG1310 Electricity and electronics P1.2 Electronic Communication
课程内容笔记,自用,不涉及任何 assignment,exam 答案 Notes for self use, not included any assignments or exams 一个 3h 的 ...
- MassTransit - .NET Core 的分布式应用程序框架
简介 MassTransit 是一个免费的.开源的.NET 分布式应用程序框架.MassTransit 使创建应用程序和服务变得容易,这些应用程序和服务利用基于消息的松散耦合异步通信来实现更高的可用性 ...