如何定義和使用：

在組件的template中使用slot標(biāo)簽定義,slot標(biāo)簽中間可以定義默認(rèn)顯示值，如果slot標(biāo)簽沒有聲明name屬性值，在使用插槽時(shí)將默認(rèn)從第一個(gè)插槽依次往下放置，為了方便使用，一般都會(huì)都插槽slot指定一個(gè)name屬性值，當(dāng)要使用該插槽時(shí)，只需要在要使用的標(biāo)簽內(nèi)添加slot=‘插槽名字',就可以將指定的標(biāo)簽放到指定的插槽內(nèi)，插槽內(nèi)可以是任意內(nèi)容。

舉例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>slot插槽練習(xí)</title>

    <script src="../../js/vue.js"></script>

</head>

<body>

    <div id="app">

        <div style="border: 7px solid blueviolet;">

            <h2>父組件</h2>

            <cpn>

                <!-- 將一個(gè)元素添加到指定得插槽位置 -->

                <button slot="left">按鈕</button>

                <input type="text" slot="right" placeholder="這是輸入框..."></input>

            </cpn>

        </div>

    </div>

    <template lang="" id="cpn">

        <div style="border: 6px solid green;">

            <h2>子組件</h2>

            <!-- 在子組件中定義三個(gè)插槽，插槽內(nèi)得值為默認(rèn)值 -->

            <slot name="left">左</slot>

            <slot name="mediate">中</slot>

            <slot name="right">右</slot>

        </div>

    </template>

    <script>

        new Vue({

            el:'#app',

            components:{

                cpn:{

                    template:'#cpn',

                }

            }

        })

    </script>

</body>

</html>

效果如圖：

分析:

在上面實(shí)例中，子組件中定義了三個(gè)插槽，并給了具體的name屬性值，在父組件調(diào)用子組件中，子組件內(nèi)給name為left的插槽位置放置了一個(gè)按鈕，將并將一個(gè)輸入框放置到name為right的插槽。從中我們可以發(fā)現(xiàn)，通過使用插槽，可以使組件有更多的擴(kuò)展，插槽內(nèi)的內(nèi)容可以是任意內(nèi)容，定義插槽，相當(dāng)于提前給組件挖好一個(gè)坑，等后面用到的時(shí)候再調(diào)用。

到此這篇關(guān)于淺談Vue中插槽slot的使用方法的文章就介紹到這了,更多相關(guān)Vue中插槽slot用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: