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指令的主要内容,如果未能解决你的问题,请参考以下文章

深入理解vue组件

Vue教程v-once 指令

Vue的一些基本指令

vue基础二,组件

Vue指令续加组件

Vue_(基础)Vue中的指令