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

更新時(shí)間：2021年11月24日 10:53:23 投稿：hqx

這篇文章主要給大家分享了 Vue中插槽slot的使用方法，下面文章內(nèi)容圍繞插槽slot的相關(guān)資料展開(kāi)其的使用方法,需要的朋友可以參考一下，希望多大家有所幫助

如何定義和使用：

在組件的template中使用slot標(biāo)簽定義,slot標(biāo)簽中間可以定義默認(rèn)顯示值，如果slot標(biāo)簽沒(méi)有聲明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)，通過(guò)使用插槽，可以使組件有更多的擴(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

關(guān)于vue項(xiàng)目proxyTable配置和部署服務(wù)器的問(wèn)題
這篇文章主要介紹了關(guān)于vue項(xiàng)目proxyTable配置和部署服務(wù)器的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue3使用vue-office插件實(shí)現(xiàn)word預(yù)覽功能
vue-office是一個(gè)支持多種文件(docx、.xlsx、pdf)預(yù)覽的vue組件庫(kù),支持vue2和vue3,這篇文章主要介紹了Vue3使用vue-office插件實(shí)現(xiàn)word預(yù)覽功能,需要的朋友可以參考下
2024-04-04
ElementUI radio組件選中小改造
這篇文章主要介紹了ElementUI radio組件選中小改造，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
vue3使用element?ui的方法實(shí)例
vue3出來(lái)好一段時(shí)間了,一直想著用一下,下面這篇文章主要給大家介紹了關(guān)于vue3使用element?ui的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-10-10
詳解Vue項(xiàng)目編譯后部署在非網(wǎng)站根目錄的解決方案
這篇文章主要介紹了Vue項(xiàng)目編譯后部署在非網(wǎng)站根目錄的解決方案,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04
Vue數(shù)據(jù)變了但頁(yè)面沒(méi)有變的幾種情況及解決方法
如果,你發(fā)現(xiàn)自己需要在Vue中做一次強(qiáng)制更新,99.99%的情況,是你在某個(gè)地方做錯(cuò)了事,本文給大家就介紹了Vue數(shù)據(jù)變了,但頁(yè)面沒(méi)有變的幾種情況及解決方法,并通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2024-08-08
Vue中util的工具函數(shù)實(shí)例詳解
本文通過(guò)實(shí)例代碼給大家介紹了Vue中util的工具函數(shù)，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-07-07
網(wǎng)站國(guó)際化多語(yǔ)言處理工具i18n安裝使用方法圖文詳解
國(guó)際化是設(shè)計(jì)軟件應(yīng)用的過(guò)程中應(yīng)用被使用與不同語(yǔ)言和地區(qū),下面這篇文章主要給大家介紹了關(guān)于網(wǎng)站國(guó)際化多語(yǔ)言處理工具i18n安裝使用方法的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
vue使用路由守衛(wèi)實(shí)現(xiàn)菜單的權(quán)限設(shè)置
我們使?vue-element-admin前端框架開(kāi)發(fā)后臺(tái)管理系統(tǒng)時(shí),?般都會(huì)涉及到菜單的權(quán)限控制問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue使用路由守衛(wèi)實(shí)現(xiàn)菜單的權(quán)限設(shè)置的相關(guān)資料,需要的朋友可以參考下
2023-06-06
使用Vue實(shí)現(xiàn)防篡改的水印
我們?cè)谄綍r(shí)上網(wǎng)的時(shí)候會(huì)看到有些圖片是加水印的,一般水印往往是后端來(lái)做的,不過(guò)有些站點(diǎn)要保護(hù)的知識(shí)產(chǎn)權(quán)類型比較多,不光是圖片,可能還有視頻或者文字,所以我們水印的作用,就是給他做一個(gè)適當(dāng)?shù)南拗?本文就給大家介紹一下如何使用Vue實(shí)現(xiàn)防篡改的水印
2023-08-08