Vue3使用slot插槽的實(shí)現(xiàn)
更新時(shí)間：2023年12月21日 10:31:27 作者：Python私教
插槽在真實(shí)的開發(fā)中使用非常的多,比如我們?nèi)ビ靡恍┑谌浇M件庫的時(shí)候,通常都需要通過自定義插槽來實(shí)現(xiàn)內(nèi)容的自定義,本文主要介紹了Vue3使用slot插槽的實(shí)現(xiàn),感興趣的可以了解一下
概述
插槽在真實(shí)的開發(fā)中使用非常的多，比如我們?nèi)ビ靡恍┑谌浇M件庫的時(shí)候，通常都需要通過自定義插槽來實(shí)現(xiàn)內(nèi)容的自定義。
在Vue3中使用插槽非常的簡單。
插槽相當(dāng)于在組件中給你預(yù)留一塊位置，你可以將自己的vue3相關(guān)的代碼插入到這個(gè)位置中。
基本用法
我們創(chuàng)建src/components/Demo31.vue，代碼如下：
<template>
<div>
<h3>我在下面給你預(yù)留一個(gè)插槽，你可以傳Vue3的代碼進(jìn)來</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覽器訪問：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)來</h3>
<slot></slot>
</div>
</template>
啟動(dòng)方式
yarn yarn dev
瀏覽器訪問：http://localhost:5173/
到此這篇關(guān)于Vue3使用slot插槽的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue3 slot插槽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue無限輪播插件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了關(guān)于vue2響應(yīng)式缺陷的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
詳解vue-flickity的fullScreen功能實(shí)現(xiàn)
這篇文章主要介紹了詳解vue-flickity的fullScreen功能實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
關(guān)于vue.extend和vue.component的區(qū)別淺析
最近工作中遇到了vue.extend,vue.component，但二者之間的區(qū)別與聯(lián)系是什么呢？下面這篇文章主要給大家介紹了關(guān)于vue.extend和vue.component區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
這篇文章主要介紹了vue+php實(shí)現(xiàn)的微博留言功能,結(jié)合完整實(shí)例形式分析了vue.js前臺留言及后臺php交互功能相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
vue使用Highcharts實(shí)現(xiàn)3D餅圖
這篇文章主要為大家詳細(xì)介紹了vue使用Highcharts實(shí)現(xiàn)3D餅圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue自定義組件實(shí)現(xiàn)?v-model?的幾種方式
在?Vue?中,v-model?是一個(gè)常用的指令,用于實(shí)現(xiàn)表單元素和組件之間的雙向綁定,當(dāng)我們使用原生的表單元素時(shí),直接使用?v-model?是很方便的,本文給大家介紹了Vue自定義組件實(shí)現(xiàn)?v-model?的幾種方式,需要的朋友可以參考下2024-02-02
Vue2使用cube-ui?實(shí)現(xiàn)搜索過濾、高亮功能
cube-ui?是基于?Vue.js?實(shí)現(xiàn)的精致移動(dòng)端組件庫，由于很長一段時(shí)間沒有學(xué)習(xí)cube-ui?的功能實(shí)現(xiàn)示例代碼了，今天通過本文給大家介紹下Vue2使用cube-ui?實(shí)現(xiàn)搜索過濾、高亮功能，感興趣的朋友跟隨小編一起看看吧2023-01-01
在管理系統(tǒng)中，常常需要在頂部tags顯示瀏覽歷史。本文將教大家如何通過Vue實(shí)現(xiàn)這一功能，文中的示例代碼講解詳細(xì)，需要的可以參考一下2021-12-12
這篇文章主要介紹了vue中組件如何使用vue-quill-editor問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01