动态组件与v-once指令

2019-12-20 10:03:15 阅读：235 来源： 互联网

标签：Vue component two 指令 template child 组件 type once

动态组件

Vue内置<component :is="name"></component>根据is属性绑定Vue实例中data里面对应的数据名，动态切换组件，然后自动加载不同组件。

<body>
  <div id="root">
   <!-- <child-one v-if="type==='child-one'"></child-one>
   <child-two v-else="type==='child-one'"></child-two>-->
    <component :is="type"></component>
   <button @click="handleBtnClick">change</button> 
  
  </div>
 <script>
   Vue.component('child-one',{
    template:'<div>child-one</div>'
   })
   Vue.component('child-two',{
    template:'<div>child-two</div>'
   })
   var vm=new Vue({
    el:'#root',
    data:{
      type:'child-one'
    },methods:{
      handleBtnClick:function(){
        this.type=(this.type==='child-one'?'child-two':'child-one');
      }
    }
   })
 </script>
</body>

v-once指令

会将第一次展示在页面中的资源保存在内存中，下一次直接加载缓存（内存中的资源），提高静态内容的展示效率。

<body>
  <div id="root">
    <child-one v-if="type==='child-one'"></child-one>
    <child-two v-if="type==='child-two'"></child-two>
    <!-- <component :is="type"></component> -->
   <button @click="handleBtnClick">change</button> 
  
  </div>
 <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:'#root',
    data:{
      type:'child-one'
    },methods:{
      handleBtnClick:function(){
        this.type=(this.type==='child-one'?'child-two':'child-one');
      }
    }
   })
 </script>
</body>

标签：Vue,component,two,指令,template,child,组件,type,once
来源： https://www.cnblogs.com/tengteng0520/p/12071579.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

动态组件与v-once指令