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>

 

posted @ 2020-03-06 14:04  前端之旅  阅读(306)  评论(0)    收藏  举报