介绍 & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title>动态组件和v-once指令& lt;/title>
& lt;才能script src=癶ttps://cdn.jsdelivr.net/npm/vue/dist/vue.js"祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=癮pp"祝辞
& lt;才能component :=皌ype"祝辞& lt;/component>
& lt; !——,, & lt; child-one v=皌ype ===, & # 39; child-one& # 39;“祝辞& lt;/child-one>——比;
& lt; !——,, & lt; child-two v=皌ype ===, & # 39; child-two& # 39;“祝辞& lt;/child-two>——比;
& lt;才能button @click=癶andleBtnClick"祝辞change
& lt;/div>
& lt;/body>
& lt;/html>
& lt; script>
Vue.component才能(& # 39;child-one& # 39;,, {
,,,模板:,& # 39;& lt; div v-once> child-one
& # 39;
})才能
Vue.component才能(& # 39;child-two& # 39;,, {
,,,模板:,& # 39;& lt; div v-once> child-two这篇文章给大家介绍v-once指令怎么在vue中使用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
具体如下:
点击按钮时,自动切换两个组件
<代码> & lt;组件:是=皌ype"祝辞& lt;/component>
每一次切换,都需要销毁+创建
但是这样消耗有点大,所以我们在子组件中引用了v-once指令,这样可以将显示在页面中的组件存到内存中,不会完全销毁。
关于v-once指令怎么在vue中使用就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。
