Vue中v-slot插槽的使用

Vue中v-slot插槽的使用

在vue2.6.0以上版本v-slot将取代slot-scope和slot。
这里取代的意思是：v-slot在调用时取代了 slot 和 slot-scope，而在template中声明时仍会用solt进行声明插槽。

1. 匿名插槽

<!-- 1.匿名插槽 -->
    <div id="app1">
        <cpn1>
            <template v-slot>
            
          </template>
        </cpn1>
    </div>

    <script>
        Vue.component('cpn1', {
   
            template: `
          <h1><slot>我是匿名插槽</slot></h1>
        `
        })
        const app = new Vue({
   
            el: "#app1"
        })

2.具名插槽

<!-- 2.具名插槽 -->
    <div id="app2">
        <cpn2>
            <template v-slot:header>
            
          </template>
        </cpn2>
    </div>
    <script>
        Vue.component('cpn2',