當寫vue專案的時候，會把所有的元件進行拆分，根據需求來引入對應的元件，也就是模組化開發。
1、模板定義插槽
"headers"
>
<
!-- 模板裡面定義插槽，只能有乙個外部元素--
>
"border:2px solid green;width:70%;"
>
"header"
>
這個插槽 只能接收header 的 內容...
.<
/p>
<
!-- 插槽預設值 --
>
<
/slot>
<
/div>
"border:2px solid green;width:70%"
>
"main"
>
這個插槽 只能接收 footer 的 內容...
.<
/p>
<
/slot>
<
/div>
"border:2px solid green;width:70%"
>
"footer"
>
這個插槽 只能接收 footer 的 內容...
.<
/p>
<
/slot>
<
/div>
<
/div>
<
/template>
"box"
>
<
!-- 使用的時候直接使用模板template v-slot:插槽的name --
>
//只能放在對應的插槽內
here might be a page title<
/h1>
<
/template>
here might be a page title<
/h1>
<
/template>
here might be a page title<
/h1>
<
/template>
<
/headers>
<
/div>
vue.
component
("headers",)
const vm =
newvue(,
methods:
,mounted()
})<
/script>
vue元件 使用插槽分發內容 slot
官網api 使用插槽分發內容 使用元件時，有時子元件不知道會收到什麼內容，這是由父元件決定的。1.my component 元件 div h2 我是子元件的標題 h2 只有在沒有要分發的內容時才會顯示。div 2.父元件 div h1 我是父元件的標題 h1 這是一些初始內容 這是更多的初始內容 d...
VUE 元件（三）使用slot分發內容
當需要讓元件組合使用，混合父元件的內容與子元件的模板時，就會用到sloat,這個過程叫做內容分發。props傳遞資料，events觸發事件，sloat分發內容，就構成了vue元件的3個api 一 slot的用法 單個slot 在子元件內使用特殊的元素就可以為這個子元件開啟乙個slot 插槽 在父元件...
Vue之slot內容分發
內容分發，使用特殊的元素作為原始內容的插槽，假設父元件需要在子元件內讓一些dom，那麼這些dom是顯示 不顯示 在哪個地方顯示 如何顯示，就是slot分發負責的活。可以將父元件放在子元件的內容，放到想讓他顯示的地方 父元件放在子元件的內容插到了子元件的位置 將放在子元件裡的不同html標籤放在不同的...