淺談Vue中插槽slot的使用方法

Posted on by

如何定義和使用：

在組件的template中使用slot標簽定義,slot標簽中間可以定義默認顯示值，如果slot標簽沒有聲明name屬性值，在使用插槽時將默認從第一個插槽依次往下放置，為瞭方便使用，一般都會都插槽slot指定一個name屬性值，當要使用該插槽時，隻需要在要使用的標簽內添加slot=‘插槽名字’,就可以將指定的標簽放到指定的插槽內，插槽內可以是任意內容。

舉例：

<!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插槽練習</title>

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

</head>

<body>

    <div id="app">

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

            <h2>父組件</h2>

            <cpn>

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

                <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>

            <!-- 在子組件中定義三個插槽，插槽內得值為默認值 -->

            <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>

效果如圖：

分析:

在上面實例中，子組件中定義瞭三個插槽，並給瞭具體的name屬性值，在父組件調用子組件中，子組件內給name為left的插槽位置放置瞭一個按鈕，將並將一個輸入框放置到name為right的插槽。從中我們可以發現，通過使用插槽，可以使組件有更多的擴展，插槽內的內容可以是任意內容，定義插槽，相當於提前給組件挖好一個坑，等後面用到的時候再調用。

到此這篇關於 淺談Vue中插槽slot的使用方法的文章就介紹到這瞭,更多相關Vue中插槽slot用法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：