手把手教你VUE从入门到放弃—— 篇二十（动态组件与v-once指令）

本文链接：https://blog.youkuaiyun.com/JavaCoder_juejue/article/details/103696134

使用v-if 实现如下功能，有俩控件，跟一个按钮，默认显示其中一个控件，点击按钮显示另一个

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的插槽与具名插槽</title>
    <script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
       <child-one v-if="type === 'child-one'"></child-one>
       <child-two v-if="type === 'child-two'"></child-two>
       <button type="button" @click="handleBtnClick">change</button>
   </div>
   <script>
       Vue.component('child-one',{
           template:'<b > child-one </b>'
       });
       Vue.component('child-two',{
           template:'<b > child-two </b>'
       });

       var app = new Vue({
           el:'#app2',
           data:{
               type:'child-one'
           },
           methods:{
               handleBtnClick:function(){
                   this.type = this.type == 'child-one'?'child-two':'child-one'
               }
           }
       });


   </script>
</body>
</html>

使用动态组件实现上面功能

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的插槽与具名插槽</title>
    <script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
       <component :is='type'></component>
       
       <button type="button" @click="handleBtnClick">change</button>
   </div>
   <script>
       Vue.component('child-one',{
           template:'<b > child-one </b>'
       });
       Vue.component('child-two',{
           template:'<b > child-two </b>'
       });

       var app = new Vue({
           el:'#app2',
           data:{
               type:'child-one'
           },
           methods:{
               handleBtnClick:function(){
                   this.type = this.type == 'child-one'?'child-two':'child-one'
               }
           }
       });


   </script>
</body>
</html>

使用v-once进行优化

以上功能当显示一个组件时会销毁另一个组件，此时我们加入v-once会在初次使用组件时将组件加入缓存

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的插槽与具名插槽</title>
    <script src="vue.js"></script>
</head>
<body>
<div id = 'app2'>
       <component :is='type'></component>
       
       <button type="button" @click="handleBtnClick">change</button>
   </div>
   <script>
       Vue.component('child-one',{
           template:'<b v-once> child-one </b>'
       });
       Vue.component('child-two',{
           template:'<b v-once> child-two </b>'
       });

       var app = new Vue({
           el:'#app2',
           data:{
               type:'child-one'
           },
           methods:{
               handleBtnClick:function(){
                   this.type = this.type == 'child-one'?'child-two':'child-one'
               }
           }
       });


   </script>
</body>
</html>