一直覺得vue的slot比較申請，而且比較深奧，總有點不想用的感覺，事實上，在一定程度上，也真的可以完全避開slot就能把一個項目完全搭建完成。

但是隨著用的次數(shù)越來越多，看到的內容也越來越多的情況，突然間，靈光乍現(xiàn)：發(fā)現(xiàn)slot也沒有那么深奧！

slot是什么？插槽！什么叫插槽？簡單粗暴點可以說：插槽內可以放置一些內容，換而言之，其實就是slot可以讓我們自定義一些html標簽。

Vue 實現(xiàn)了一套內容分發(fā)的 API，這套 API 基于當前的 Web Components 規(guī)范草案，將 <slot> 元素作為承載分發(fā)內容的出口。

　　看一個最簡單的例子：

<template><div class="main"><slot></slot></div> </template> <style> .main {padding: 20px; } </style>

　　在一個vue文件當中，我們僅僅定義了一個標簽，設置了部分樣式（我們也可以設置更多樣式），然后在main.js當中，定義一個全局組件

import Container from "@/components/main/Container" Vue.component('Container', Container)

　　之后，我們就可以在任何一個頁面使用Container作為自定義標簽，<Container>。。。自定義內容</Container>，所有頁面就可以共享這個Container內部定義的所有樣式，方法等所有一切可以在vue組件當中定義的內容，甚至提前定義一些內容，這就是插槽的內容分發(fā)。

　　突然間，冒出來一個奇怪的想法，是不是可以像react的高階組件一樣理解slot呢？

轉載于:https://www.cnblogs.com/zhuhuoxingguang/p/10179506.html

總結

以上是生活随笔為你收集整理的vue slot的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。