Vue3使用slot插槽的實現(xiàn)
更新時間：2023年12月21日 10:31:27 作者：Python私教
插槽在真實的開發(fā)中使用非常的多,比如我們?nèi)ビ靡恍┑谌浇M件庫的時候,通常都需要通過自定義插槽來實現(xiàn)內(nèi)容的自定義,本文主要介紹了Vue3使用slot插槽的實現(xiàn),感興趣的可以了解一下
概述
插槽在真實的開發(fā)中使用非常的多，比如我們?nèi)ビ靡恍┑谌浇M件庫的時候，通常都需要通過自定義插槽來實現(xiàn)內(nèi)容的自定義。
在Vue3中使用插槽非常的簡單。
插槽相當(dāng)于在組件中給你預(yù)留一塊位置，你可以將自己的vue3相關(guān)的代碼插入到這個位置中。
基本用法
我們創(chuàng)建src/components/Demo31.vue，代碼如下：
<template>
<div>
<h3>我在下面給你預(yù)留一個插槽，你可以傳Vue3的代碼進來</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)容會被填充到插槽1</h3>
<h3>這里的內(nèi)容會被填充到插槽2</h3>
<h3>這里的內(nèi)容會被填充到插槽3</h3>
</demo>
</template>
然后，我們?yōu)g覽器訪問：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)容會被填充到插槽1</h3>
<h3>這里的內(nèi)容會被填充到插槽2</h3>
<h3>這里的內(nèi)容會被填充到插槽3</h3>
</demo>
</template>
src/components/Demo31.vue
<template>
<div>
<h3>我在下面給你預(yù)留一個插槽，你可以傳Vue3的代碼進來</h3>
<slot></slot>
</div>
</template>
啟動方式
yarn yarn dev
瀏覽器訪問：http://localhost:5173/
到此這篇關(guān)于Vue3使用slot插槽的實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue3 slot插槽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了淺談nuxtjs校驗登錄中間件和混入(mixin)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
mpvue性能優(yōu)化實戰(zhàn)技巧(小結(jié))
這篇文章主要介紹了mpvue性能優(yōu)化實戰(zhàn)技巧(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue 生成gzip壓縮包部署到nginx服務(wù)器，如果我們把web網(wǎng)站資源進行g(shù)zip壓縮后進行傳輸給瀏覽器，這樣就能加快網(wǎng)站資源的加載速度，這篇文章主要介紹了vue生成gzip壓縮包部署到nginx,需要的朋友可以參考下2022-12-12
關(guān)于vue組件的更新機制?resize()?callResize()
這篇文章主要介紹了關(guān)于vue組件的更新機制?resize()?callResize()，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
今天小編就為大家分享一篇vue-cli腳手架搭建的項目去除eslint驗證的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue項目前端埋點的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue3優(yōu)雅的實現(xiàn)跨組件通信的常用方法總結(jié)
開發(fā)中經(jīng)常會遇到跨組件通信的場景,props?逐層傳遞的方法實在是太不優(yōu)雅了,所以今天總結(jié)下可以更加簡單的跨組件通信的一些方法,文中通過代碼實例講解的非常詳細,需要的朋友可以參考下2023-11-11
在Vue2中組件的props的數(shù)據(jù)流動改為了只能單向流動，如何在Vue2中實現(xiàn)組件props雙向綁定 ，一起來跟小編看看。2017-03-03
這篇文章主要介紹了Vue組件化通訊的實例代碼的相關(guān)資料,需要的朋友可以參考下2017-06-06
本文主要介紹了vue-element-admin下載到登錄的一些坑，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04