vue的插槽的使用-slot

1. slot的基本使用:<slot></slot>
       slot可以設置默認值： <slot><h5>默認</h5></slot>

     <div id="app">
           <navbar><span>an</span></navbar>//slot替換爲span>an</span>
           <navbar><span>ahh</span><span>全部替換</span></navbar>//多個標籤同步替換
           <navbar><button>an</button></navbar>
           <navbar></navbar>//這裏使用slot的默認值
       </div>
   <template id="Navbar">
       <div class="nav">
           <h1>solt的使用</h1>
           <slot>
               <h5>默認</h5>//給slot設置了默認值
           </slot>
       </div>
   </template>
   <script>
       const app=new Vue({
           el:'#app',
           components:{
               navbar:{template:'#Navbar',}
           }
       })
   </script>

   2、具名插槽:<slot name="插槽名稱"></slot>

   假設我們封裝了一個導航欄組件，建立了左中右三個插槽，外邊給插槽插入內容時，怎麼區分？

     <div id="app">
           <navbar><span>right</span></navbar>//修改了最後沒有name的slot
           <navbar><button  slot='left'>jaintou</button></navbar>//修改name=left的slot
           <navbar><h1 slot="center">title</h1></navbar>//修改name=center的slot
       </div>
   <template id="Navbar">
       <div class="nav">
           <slot name='left'><span>左邊</span></slot>
           <slot name="center"><span>中間</span></slot>
           <slot>右邊</slot>
       </div>
   </template>
   <script>
       const app=new Vue({
           el:'#app',
           components:{
               navbar:{template:'#Navbar',}
           }
       })
   </script>

   3、編譯的作用域：

   父模板的所有東西都在父級作用域內編譯，子組件的所有模板的所有東西都在子集作用域內編譯。

4、作用域插槽：父組件替換插槽的標籤，但是內容是由子組件提供的

  <div id="app">
        <navbar>
            <!-- template目的是獲取子組件中的datass -->
            <template slot-scope="slot">//固定寫法
                <div v-for="item in slot.datass">{{item}}*</div>//datass就是下面的slot綁定的datass值：pLanguage
            </template>
        </navbar>
        <navbar>
            <template slot-scope="slot">
                <span>{{slot.datass.join('*')}}</span>
            </template>
        </navbar>
    </div>
<template id="Navbar">
    <div class="nav">
        <slot :datass="pLanguage">
            <ul>
                <li v-for="item in pLanguage">{{item}}</li>
            </ul>
        </slot>
    </div>
</template>
<script>
    const app = new Vue({
        el: '#app',
        components: {
            navbar: { template: '#Navbar', data() { return { pLanguage: ['javasctipe', 'c++', 'go', 'python'] } } }
        }
    })
</script>