vue学习笔记之动态组件和v-once指令简单示例
作者:Rachel~Liu
这篇文章主要介绍了vue学习笔记之动态组件和v-once指令,结合简单实例形式详细分析了vue.js动态组建点击切换相关操作技巧,需要的朋友可以参考下
本文实例讲述了vue动态组件和v-once指令。分享给大家供大家参考,具体如下:
点击按钮时,自动切换两个组件
<component :is="type"></component>
,当点击按钮之后,会自动清除原来的组件,显示新的组件。
每一次切换,都需要销毁+创建
但是这样消耗有点大,所以我们在子组件中引用了v-once指令,这样可以将显示在页面中的组件存到内存中,不会完全销毁。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态组件和v-once指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <component :is="type"></component> <!-- <child-one v-if="type === 'child-one'"></child-one>--> <!-- <child-two v-if="type === 'child-two'"></child-two>--> <button @click="handleBtnClick">change</button> </div> </body> </html> <script> Vue.component('child-one', { template: '<div v-once>child-one</div>' }) Vue.component('child-two', { template: '<div v-once>child-two</div>' }) var vm = new Vue({ el: '#app', data: { type: 'child-one' }, methods: { handleBtnClick: function () { this.type = (this.type === 'child-one' ? 'child-two' : 'child-one'); } } }) </script>
运行结果:
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。