vue学习笔记之动态组件和v-once指令简单示例

砸漏

发布于 2020-11-05 15:27:12

3340

发布于 2020-11-05 15:27:12

文章被收录于专栏：恩蓝脚本恩蓝脚本

本文实例讲述了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

运行结果：