一、為什么要使用插槽

在生活中，電腦的USB接口對應不同的設備就提供不同的功能油讯，可以接鍵盤秩伞、鼠標、音響饮睬、U盤……
在組件中租谈，slot的使用可以讓封裝的組件更有擴展性。
使用者可以根據(jù)需要修改組件割去。
比如一個搜索框組件昼丑，因為藍色組件中會變成店鋪，所以在封裝搜索框組件時矾克，就將這個容易變動的部分放在插槽中页慷，使用者可以根據(jù)需要修改插槽部分酒繁。

image.png

二、slot的基本使用

1.在子組件中用slot標簽開啟一個插槽

image.png

        <div id="app">
            <cpn></cpn>
        </div>
        <template id="cpn">
            <h2>固定展示部分</h2>
            <slot>
                <h2>可以變動的部分</h2>
            </slot>
        </template>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const app = new Vue({
                el: '#app',
                components: {
                    cpn: {
                        template: '#cpn'
                    }
                }
            })
        </script>

2.在父組件中修改slot

        <div id="app">
            <cpn></cpn>
            <cpn>
                <h2>代替插槽部分</h2>
                <p>我也是代替插槽的部分</p>
            </cpn>
        </div>

父組件若不修改slot,則slot部分由子組件決定默認展示州袒。
父組件修改slot郎哭，則修改的內(nèi)容會覆蓋子組件slot的內(nèi)容菇存。

image.png

二依鸥、具名插槽slot

當子組件的功能增多時，一個組件中不只設置了一個插槽絮供，那父組件想修改特定的插槽部分時茶敏，如何指定其中的一個插槽修改惊搏。這時就要給插槽取個名字做標識胀屿。

        <div id="app">
            <cpn></cpn>
            <cpn>
                <template v-slot:left>
                    <p>修改left</p>
                </template>
                <template v-slot:default>
                    <p>修改center</p>
                </template>
                <template v-slot:footer>
                    <p>修改footer</p>
                </template>
            </cpn>
        </div>
        <template id="cpn">
            <div>
                <slot name="left">
                    <p>top部分</p>
                </slot>
                <slot>
                    <p>center部分</p>
                </slot>
                <slot name="right">
                    <p>footer部分</p>
                </slot>             
            </div>
        </template>     
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const app = new Vue({
                el: '#app',
                components: {
                    cpn: {
                        template: '#cpn'
                    }
                }
            })
        </script>

在子組件中利用slot標簽的name屬性宿崭，給各自的slot標記id
父組件在template標簽中葡兑，利用v-slot的指令讹堤，并給v-slot指令指定屬性值（子組件的name），從而修改并覆蓋子組件中的slot
注意：子組件中默認slot的name是default疑务。

image.png

三、作用域插槽

父組件想要使用子組件中的數(shù)據(jù)温鸽，除了$emit()涤垫，作用域插槽也提供了方法竟终。

        <div id="app">
            <cpn>
                <template v-slot:center="slotProps">
                    <p>{{slotProps.message}}</p>
                </template>
            </cpn>
        </div>
        <template id="cpn">
            <div>
                <slot name="left">
                    <p>top部分</p>
                </slot>
                <slot name="center" :message="message">
                    <p>center部分</p>
                </slot>
                <slot name="right">
                    <p>footer部分</p>
                </slot>             
            </div>
        </template>     
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const app = new Vue({
                el: '#app',
                components: {
                    cpn: {
                        template: '#cpn',
                        data(){
                            return {
                                message:'子組件的數(shù)據(jù)'
                            }
                        }
                    }
                }
            })
        </script>

子組件中的center插槽通過v-bind指令榆芦，將子組件中的message綁定到slot上

                <slot name="center" :message="message">
                    <p>center部分</p>
                </slot>

slot上的數(shù)據(jù)被收集到slotProps中歧杏，父組件就可以使用slotProps獲取子組件的message數(shù)據(jù)犬绒。

image.png