动态组件与slot插槽

动态组件与slot插槽

一、动态组件

• 可以改变的的组件
• Vue 提供了一个 component + is 属性
• 动态组件指的就是component组件

<div id="app">
        <button @click = "change"> 切换 </button>
        <component v-bind:is = "type"></component>
</div>

<script>
    Vue.component('A',{
        template:'<div> A </div>'
    })

    Vue.component('B',{
        template:'<div> B </div>'
    })

    new Vue({
        data:{
            type:'A'
        },
        methods:{
            change(){
                this.type = this.type ==='A'?'B':'A'  //三目运算符进行判断类型，如果是A就换成B
            }
        }
    }).$mount('#app')

上述切换涉及到两个组件的创建和销毁，对内存会有损耗，如果能将组件缓存起来，就可以解决这个问题

• Vue提供了一个叫做 keep-alive 的组件可以将我们的组件进行浏览器缓存，这样当我们切换组件时，就可以大大提高使用效率，推荐使用此方法

<div id="app">
      <button @click = "change"> 切换 </button>
      <keep-alive include="">    <!--利用keep-alive将组件进行缓存-->
         <component :is = "type"></component>
      </keep-alive>
</div>

• keep-alive也可以以属性的形式呈现，但是我们如果搭配component的话，建议使用组件的形式

<component :is = "type" keep-alive></component>

二、slot插槽

作用：预先将之后要使用的内容进行保留

• 用法1、slot插槽

<div id="app">
        <Hello>
            <div> 我是插槽的部分 </div>
        </Hello>
</div>
<template id='hello'>
     <div>
         <slot></slot>  <!--使用slot标签接收上面组件中的内容，将其保留下来-->
         <h3> 这里是hello </h3>
      </div>
 </template>

<script>
    Vue.component('Hello',{
        template:'#hello'
    })
    new Vue({
        
    }).$mount('#app')
</script>  

• 用法2、具名插槽：给slot起一个名字

<div id="app">
    <Hello>
      <header slot = 'header'> 这里是头部 </header>  <!--指定对应的slot将对应内容保留-->
      <footer slot = 'footer'> 这里是底部 </footer>
    </Hello>
 </div>
 <template id="hello">
    <div>
      <slot name = "header"></slot>  <!--给slot加了一个名字-->
      <h3>这里是hello</h3>
      <slot name = "footer"></slot>
    </div>
 </template>

<script>

  Vue.component('Hello',{
    template: '#hello'
  })

  new Vue({
    el: '#app'
  })
</script>

注意：以上两种用法在vue2.6以上版本被废弃，用v-slot指令来代替，因为将具名插槽和作用域插槽进行统一，而且要将这两个属性带上vue标志，并符合vue的指令特性

新旧两种插槽

• 旧：slot-scope

使用流程

<div id="app">
   <Hello>
     <template slot = "default" slot-scope = "slotProp">   
     <!--在组件使用时，通过slot-scope = "slotProp" 来接收slot标签身上绑定的数据-->
     <p> {{ slotProp.msg}}</p>  <!--通过slotProp.msg来使用-->
     </template>
   </Hello>
</div>
   <template id="hello">
       <div>
       <slot name = "default" v-bind:msg = "msg"></slot>  <!--在组件的模板中书写slot插槽，并将当前组件的数据通过 v-bind 绑定在 slot标签上-->
       </div>
   </template>

<script>
    Vue.component('Hello',{
        template:'#hello',
        data(){
            return {
                msg:'hello'
            }
        }
    })

    new Vue({
        el:"#app"
    })
</script>

• 新：v-slot

<div id="app">
        <Hello>
            <template v-slot:default ="slotProp">  
                <p>{{slotProp.msg}}</p>
            </template>
        </Hello>
 </div>
 <template id="hello">
        <div>
            <slot name = "default" v-bind:msg = "msg"></slot>
        </div>
  </template>

<script>
    new Vue({
        el:"#app",
        components:{   //这里写的是局部创建组件方式，功能是一样的
            'Hello':{
                template:'#hello',
                data(){
                    return {
                        msg:'hello'
                    }
                }
            }
        }
    })
</script>