600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > vue动态渲染组件

vue动态渲染组件

时间:2022-01-15 14:40:59

相关推荐

vue动态渲染组件

component 动态渲染组件

使用<component v-bind:is="xxxComponent"></component>来动态渲染组件

使用方式:

<keep-alive><component :is="myComponent"></component></keep-alive>

ponent("briup-success",{template:`<div style="width: 200px;height: 200px;background-color: lightgreen;"><div>SUCCESS</div></div>`,})ponent("briup-error",{template:`<div style="width: 200px;height: 200px;background-color:red;"><div>ERROR</div></div>`,})new Vue({el:"#app",data:{myComponent:"briup-success"},methods:{changeSuccess(){this.myComponent="briup-success"},changeError(){this.myComponent="briup-error"},changeComponent(){var mC=this.myComponent;var that=this;if(mC==="briup-success"){that.myComponent="briup-error"}else{that.myComponent="briup-success"}}}})

默认情况下,当组件发生切换的时候,组件会被重新创建

我们希望能够把被切换的组件缓存下来(在他第一次创建的时候就缓存下来)

为了解决这个问题,可以使用将动态组件包裹起来 失活的组件就被缓存下来了

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。