Vue3使用slot插槽的實(shí)現(xiàn)
更新時(shí)間：2023年12月21日 10:31:27 作者：Python私教
插槽在真實(shí)的開(kāi)發(fā)中使用非常的多,比如我們?nèi)ビ靡恍┑谌浇M件庫(kù)的時(shí)候,通常都需要通過(guò)自定義插槽來(lái)實(shí)現(xiàn)內(nèi)容的自定義,本文主要介紹了Vue3使用slot插槽的實(shí)現(xiàn),感興趣的可以了解一下
概述
插槽在真實(shí)的開(kāi)發(fā)中使用非常的多，比如我們?nèi)ビ靡恍┑谌浇M件庫(kù)的時(shí)候，通常都需要通過(guò)自定義插槽來(lái)實(shí)現(xiàn)內(nèi)容的自定義。
在Vue3中使用插槽非常的簡(jiǎn)單。
插槽相當(dāng)于在組件中給你預(yù)留一塊位置，你可以將自己的vue3相關(guān)的代碼插入到這個(gè)位置中。
基本用法
我們創(chuàng)建src/components/Demo31.vue，代碼如下：
<template>
<div>
<h3>我在下面給你預(yù)留一個(gè)插槽，你可以傳Vue3的代碼進(jìn)來(lái)</h3>
<slot></slot>
</div>
</template>
接著，我們修改src/App.vue：
<script setup>
import Demo from "./components/Demo31.vue"
</script>
<template>
<h1>歡迎跟著Python私教一起學(xué)習(xí)Vue3入門課程</h1>
<hr>
<demo>
<h3>這里的內(nèi)容會(huì)被填充到插槽1</h3>
<h3>這里的內(nèi)容會(huì)被填充到插槽2</h3>
<h3>這里的內(nèi)容會(huì)被填充到插槽3</h3>
</demo>
</template>
然后，我們?yōu)g覽器訪問(wèn)：http://localhost:5173/
完整代碼
package.json
{
"name": "hello",
"private": true,
"version": "0.1.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"dependencies": {
"vue": "^3.3.8"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.0",
"vite": "^5.0.0"
}
}
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
})
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" rel="external nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
src/main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
src/App.vue
<script setup>
import Demo from "./components/Demo31.vue"
</script>
<template>
<h1>歡迎跟著Python私教一起學(xué)習(xí)Vue3入門課程</h1>
<hr>
<demo>
<h3>這里的內(nèi)容會(huì)被填充到插槽1</h3>
<h3>這里的內(nèi)容會(huì)被填充到插槽2</h3>
<h3>這里的內(nèi)容會(huì)被填充到插槽3</h3>
</demo>
</template>
src/components/Demo31.vue
<template>
<div>
<h3>我在下面給你預(yù)留一個(gè)插槽，你可以傳Vue3的代碼進(jìn)來(lái)</h3>
<slot></slot>
</div>
</template>
啟動(dòng)方式
yarn yarn dev
瀏覽器訪問(wèn)：http://localhost:5173/
到此這篇關(guān)于Vue3使用slot插槽的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue3 slot插槽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
淺談nuxtjs校驗(yàn)登錄中間件和混入(mixin)
這篇文章主要介紹了淺談nuxtjs校驗(yàn)登錄中間件和混入(mixin)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
mpvue性能優(yōu)化實(shí)戰(zhàn)技巧(小結(jié))
這篇文章主要介紹了mpvue性能優(yōu)化實(shí)戰(zhàn)技巧(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue 生成gzip壓縮包部署到nginx服務(wù)器，如果我們把web網(wǎng)站資源進(jìn)行g(shù)zip壓縮后進(jìn)行傳輸給瀏覽器，這樣就能加快網(wǎng)站資源的加載速度，這篇文章主要介紹了vue生成gzip壓縮包部署到nginx,需要的朋友可以參考下2022-12-12
關(guān)于vue組件的更新機(jī)制?resize()?callResize()
這篇文章主要介紹了關(guān)于vue組件的更新機(jī)制?resize()?callResize()，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-cli腳手架搭建的項(xiàng)目去除eslint驗(yàn)證的方法
今天小編就為大家分享一篇vue-cli腳手架搭建的項(xiàng)目去除eslint驗(yàn)證的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue項(xiàng)目前端埋點(diǎn)的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目前端埋點(diǎn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue3優(yōu)雅的實(shí)現(xiàn)跨組件通信的常用方法總結(jié)
開(kāi)發(fā)中經(jīng)常會(huì)遇到跨組件通信的場(chǎng)景,props?逐層傳遞的方法實(shí)在是太不優(yōu)雅了,所以今天總結(jié)下可以更加簡(jiǎn)單的跨組件通信的一些方法,文中通過(guò)代碼實(shí)例講解的非常詳細(xì),需要的朋友可以參考下2023-11-11
詳解如何在Vue2中實(shí)現(xiàn)組件props雙向綁定
在Vue2中組件的props的數(shù)據(jù)流動(dòng)改為了只能單向流動(dòng)，如何在Vue2中實(shí)現(xiàn)組件props雙向綁定 ，一起來(lái)跟小編看看。2017-03-03
這篇文章主要介紹了Vue組件化通訊的實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06
本文主要介紹了vue-element-admin下載到登錄的一些坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04