【Vue】—动态组件

<template><div><div>这里使用动态组件包装</div><!-- 能显示不同的组件 --><div><keep-alive exclude="A"><component :is='curComp' /></keep-alive><button @click="toggle">切换</button></div><div><component :is='ccdd' /><button @click="cad">切换c和d</button></div></div>
</template><script>import A from './a';import B from './b';import C from './c';import D from './d';export default {components: {A,B,C,D},data() {return {curComp: A,ccdd: C};},methods: {toggle() {this.curComp = this.curComp == A ? B : A;},cad() {this.ccdd = this.ccdd == C ? D : C}}}
</script><style></style>

【Vue】—动态组件相关推荐

vue 动态组件组件复用_真正的动态声明性组件
vue 动态组件组件复用在这篇简短的文章中,我将重点介绍ADF动态声明性组件. 我的意思是一个众所周知的ADF标签af:declarativeComponent . 它可以用作将页面设计为页面片段和 ...
vue 动态组件使用教程
vue 动态组件的使用,下面进行介绍 1.基本使用新建组件 Article.vue <template><div><p>黄州东南三十里为沙湖,亦曰螺师店.予买田其 ...
vue ---- 动态组件
动态切换组件的显示隐藏 component 如何实现动态组件渲染 vue提供了一个内置的<component>,专门用来实现动态组件的渲染. 这个标签就相当于一个占位符,需要使用is属性指 ...
Vue动态组件、组件缓存、组件激活和非激活、组件插槽、组件name
一.动态组件如何切换2个组件互斥的显示或者隐藏呢除了v-if 什么是动态组件? 多个组件使用同一个挂载点,并动态切换.这就是动态组件完成一个注册功能页面, 2个按钮切换, 一个填写注册信息, ...
vue动态组件的实现和传值
动态组件的实现和传值 1.动态组件的实现动态组件是使用 component 组件,通过一个特殊的attribute is 来实现 <template><div><but ...
Vue动态组件异步组件 keep-alive
动态组件指的是动态切换组件的显示与隐藏每次进行组件间的切换时,Vue都创建了一个新的组件实例,同时存在销毁过程为了避免过程一每次进行销毁重建的问题,那么可以通过 keep-alive 来处理 &l ...
Vue动态组件和组件缓存
一.切换组件案例比如我们现在想要实现了一个功能: 点击一个tab-bar,切换不同的组件显示: 这个案例我们可以通过两种不同的实现思路来实现: 方式一:通过v-if来判断,显示不同的组件: 方式二: ...
vue动态组件is详解
tab动态切换三个组件方法一可以使用v-if做一个隐藏显示方法二用元素的 is 的特性 <component :is="currentView" class=" ...
vue 动态组件名_vue动态加载组件mounted无法获取dom的解决思路
有时我们在mouted方法中想通过id读取到一个dom元素,虽然官方并不推荐这种方法来操作dom.但难免有碰到这种情况,如下面一个dom元素试图在mouted中获取试图在nextick中获取结 ...
Vue动态组件传值
import User from './User'; import Login from './Login'; components: { User, Login } <component :i ...

【Vue】—动态组件

【Vue】—动态组件

【Vue】—动态组件相关推荐

最新文章

热门文章