插槽，顧名思義留一個坑在元件中，然後動態的去填坑，例如：

//Child.vue  子元件

<template>
    <div>
            <slot></slot>
    </div>
</template>
<script>
</script>
<style lang="">
    
</style>


//Parent.vue   引入子元件的檔案

<template>
    <div>
            <my-child>
                    123
            </my-child>
    </div>
</template>
<script>
import Child from './Child'
export default {
   components: {myChild: Child}
}
</script>
<style lang="">
    
</style>

//這個時候，我們的頁面就會顯示123,在Child.vue中我們使用的slot就是坑位，在Parent.vue中，引用元件中傳入的123就是填坑的內容，因為slot沒有命名，這裡稱為不具名插槽
 

那麼現在咱們來看看具名插槽的寫法

//Child.vue  子元件

<template>
    <div>
            <h1>--------------分割線--------------------</h1>
            <slot name="navBar"></slot>
            <h1>--------------分割線--------------------</h1>
            <slot name="endBar"></slot>
            <h1>--------------分割線--------------------</h1>
    </div>
</template>
<script>
</script>
<style lang="">
    
</style>

//Parent.vue   引入子元件的檔案

<template>
    <div>
            <my-child>
                    <template slot="navBar">
                            234
                    </template>
                    <template slot="endBar">
                            345
                    </template>
            </my-child>
    </div>
</template>
<script>
import Child from './Child'
export default {
   components: {myChild: Child}
}
</script>
<style lang="">
    
</style>

//這個時候我們需要注意的是，在Child.vue中，用name來標識該插槽slot，而在使用中，我們用<template slot="表示名">來傳入指定的插槽
 

還有一個插槽方式叫做作用域插槽

//Child.vue  子元件

<template>
    <div>
             <!-- 這裡的test作為鍵  ParentFromData 作為值返回給父元件 {test:  'Hello Vue!!!'}-->
            <slot :test="ParentFromData"></slot>
    </div>
</template>
<script>
export default {
    prop: ['ParentFromData']
}
</script>
<style lang="">
    
</style>


//Parent.vue   引入子元件的檔案

<template >
    <div>
            <my-child :ParentFromData='data'>
                    <template slot-scope='ChildFromData'>
                          {{ChildFromData}}
                    </template>
            </my-child>
    </div>
</template>
<script>
import Child from './Child'
export default {
   data(){
        return{
            data: 'Hello Vue!!!'
        }
    }
   components: {myChild: Child}
}
</script>
<style lang="">
    
</style>

//此時的流程是，Parent.vue通過  prop 將 ParentFromData傳遞給Child.vue,而Child.vue拿到值以後將值賦值給test  形成鍵值對{test: 'Hello Vue!!!'} 返回給Parent.vue,從而頁面顯示的結果為{test: 'Hello Vue!!!'}
//我發現一個vue檔案裡面只能有一個作用域插槽