淺談Vue中插槽slot的使用方法
如何定義和使用：
在組件的template中使用slot標(biāo)簽定義,slot標(biāo)簽中間可以定義默認(rèn)顯示值，如果slot標(biāo)簽沒有聲明name屬性值，在使用插槽時將默認(rèn)從第一個插槽依次往下放置，為了方便使用，一般都會都插槽slot指定一個name屬性值，當(dāng)要使用該插槽時，只需要在要使用的標(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>
<!-- 將一個元素添加到指定得插槽位置 -->
<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>
<!-- 在子組件中定義三個插槽，插槽內(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>
效果如圖：
分析:
在上面實例中，子組件中定義了三個插槽，并給了具體的name屬性值，在父組件調(diào)用子組件中，子組件內(nèi)給name為left的插槽位置放置了一個按鈕，將并將一個輸入框放置到name為right的插槽。從中我們可以發(fā)現(xiàn)，通過使用插槽，可以使組件有更多的擴(kuò)展，插槽內(nèi)的內(nèi)容可以是任意內(nèi)容，定義插槽，相當(dāng)于提前給組件挖好一個坑，等后面用到的時候再調(diào)用。
到此這篇關(guān)于 淺談Vue中插槽slot的使用方法的文章就介紹到這了,更多相關(guān)Vue中插槽slot用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
關(guān)于vue項目proxyTable配置和部署服務(wù)器的問題
這篇文章主要介紹了關(guān)于vue項目proxyTable配置和部署服務(wù)器的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3使用vue-office插件實現(xiàn)word預(yù)覽功能
vue-office是一個支持多種文件(docx、.xlsx、pdf)預(yù)覽的vue組件庫,支持vue2和vue3,這篇文章主要介紹了Vue3使用vue-office插件實現(xiàn)word預(yù)覽功能,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了ElementUI radio組件選中小改造，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue3出來好一段時間了,一直想著用一下,下面這篇文章主要給大家介紹了關(guān)于vue3使用element?ui的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
詳解Vue項目編譯后部署在非網(wǎng)站根目錄的解決方案
這篇文章主要介紹了Vue項目編譯后部署在非網(wǎng)站根目錄的解決方案,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
Vue數(shù)據(jù)變了但頁面沒有變的幾種情況及解決方法
如果,你發(fā)現(xiàn)自己需要在Vue中做一次強(qiáng)制更新,99.99%的情況,是你在某個地方做錯了事,本文給大家就介紹了Vue數(shù)據(jù)變了,但頁面沒有變的幾種情況及解決方法,并通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-08-08
本文通過實例代碼給大家介紹了Vue中util的工具函數(shù)，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
網(wǎng)站國際化多語言處理工具i18n安裝使用方法圖文詳解
國際化是設(shè)計軟件應(yīng)用的過程中應(yīng)用被使用與不同語言和地區(qū),下面這篇文章主要給大家介紹了關(guān)于網(wǎng)站國際化多語言處理工具i18n安裝使用方法的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
vue使用路由守衛(wèi)實現(xiàn)菜單的權(quán)限設(shè)置
我們使?vue-element-admin前端框架開發(fā)后臺管理系統(tǒng)時,?般都會涉及到菜單的權(quán)限控制問題,下面這篇文章主要給大家介紹了關(guān)于vue使用路由守衛(wèi)實現(xiàn)菜單的權(quán)限設(shè)置的相關(guān)資料,需要的朋友可以參考下2023-06-06
我們在平時上網(wǎng)的時候會看到有些圖片是加水印的,一般水印往往是后端來做的,不過有些站點要保護(hù)的知識產(chǎn)權(quán)類型比較多,不光是圖片,可能還有視頻或者文字,所以我們水印的作用,就是給他做一個適當(dāng)?shù)南拗?本文就給大家介紹一下如何使用Vue實現(xiàn)防篡改的水印2023-08-08