vue_动态组件与v-once指令
Posted junlan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue_动态组件与v-once指令相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h3>动态组件和v-once指令</h3> <!-- vue自带动态组件标签 --> <!-- is绑定一个数据,根据is的变化加载不同的组件 --> <component :is=‘type‘></component> <button @click="handleClick">change</button> </div> </body> <script type="text/javascript"> // v-once指令,当组件没有v-once指令时,切换组件的时候会频繁的创建组件和销毁组件 // 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。 Vue.component(‘child-one‘, { template: `<div>child-one</div>` }) Vue.component(‘child-two‘, { template: `<div>child-two</div>` }) let vm = new Vue({ el: ‘#app‘, data: { type: ‘child-one‘ }, methods: { handleClick () { this.type = this.type == ‘child-one‘ ? ‘child-two‘ : ‘child-one‘ } } }) </script> </html>
以上是关于vue_动态组件与v-once指令的主要内容,如果未能解决你的问题,请参考以下文章