动态组件

最新推荐文章于 2024-05-28 16:22:58 发布

weixin_37737079

最新推荐文章于 2024-05-28 16:22:58 发布

阅读量81

点赞数

本文链接：https://blog.csdn.net/weixin_37737079/article/details/101993647

版权

  <div id="app">
    <component :is="type"></component>
    <button @click="handleClick">toggle</button>
  </div>
  <script>
    // 子组件循环显示列表
    //v-once第一次渲染组件时会放在内存中，提高性能
    Vue.component('ChildOne',{
      template:`<div v-once>child-one</div>`
    })
    Vue.component('ChildTwo',{
      template:`<div v-once>child-two</div>`
    })
    var vm = new Vue({
      el: '#app',
      data: {
       type:'child-one'
      },
      methods: {
        handleClick() {
          this.type = (this.type==='child-one')?'child-two':'child-one'
        }
      }
    })
  </script>