在使用元件時，在引用的元件標籤中新增內容時，會自動被元件中的模板代替，如【例1】
【例1】
vue.component('my-comp',)當不想要傳遞給元件的內容被替代，則可以使用元件插槽來解決這個問題，具體使用方法是，在元件模板中新增 標籤，當元件渲染時， 將會被替換為「寫在元件標籤結構中的內容」，如【例2】
【例2】
vue.component('my-comp',)【注】插槽內可以包含任何模板**，包括 html 和其他元件
如果元件沒有包含 元素，則該元件起始標籤和結束標籤之間的任何內容都會被拋棄
因為父級模板裡的所有內容都是在父級作用域中編譯的，子模版裡的所有內容都是在子作用域中編譯的，所以插槽不能訪問其所在元件的作用域，而是模板的作用域，如【例3】
【例3】
//元件
vue.component('my-comp',
}})//vue例項
const vm = new vue(
})
預設插槽即，若在元件引用時，沒有像其傳遞內容，則使用預設插槽的內容（也稱為後備內容）；若在引用時，傳遞了內容，則渲染傳遞的內容，如【例4】
【例4】
元件vue.component('my-button',)
未傳遞內容【結果】
傳遞內容若在乙個元件中需要使用多個插槽，則要使用具名插槽來區分，其使用方式為：在元件中的 元素上使用乙個特殊的特性 name，利用這個特性可以定義額外的插槽；在引用元件時，需要在 元素上使用 v-slot 指令，v-slot 的引數即是特性 name，如【例5】【結果】hit me
【注】乙個不帶name的 會帶有隱含的名字「default」。
【例5】
//元件
vue.component('my-cmp',)
header
main
footer
default
【注】v-slot 只能新增在 上，只有一種情況特殊（介紹如下）
header
default
main
footer
為了能夠讓插槽內容訪問子元件的資料，可以將子元件的資料作為繫結在 元素的乙個特性（插槽 prop），則在父級作用域中，可以給v-slot帶乙個值來定義所提供的插槽 prop 名字，如【例6】
【例6】
//元件
vue.component('my-comp1',}},
template:``})
}
當被提供的內容只有預設插槽時，元件的標籤可以被當作插槽的模板來使用，此時，可以將 v-slot 直接用在元件上，且可以縮寫為以下形式：
}
使用結構傳入具體的插槽prop會使模板更簡潔
}
}
Vue元件插槽
三 具名插槽 命名插槽 補充當我們使用vue元件時，常常遇到子元件的部分布局在不同的路由元件上表現不同的情況，vue為了幫助我們開發者解決這個問題，新增了插槽這個功能 插槽即佔位符 實現元件在不同父元件中使用，內部可以有不一樣 塊 html 如下 示例 如下 示例 當乙個子元件內，需要多個插槽時，需...
Vue 元件的插槽
元件的插槽 示例 p 總消費量 p tan v bind name name v on tank add 可以為插槽起名 span slot haha 哈哈哈！span span slot heihei 嘿嘿嘿！span tan 第二種替換方式 tan v bind name name v on t...
vue元件開發之元件插槽
作用 父元件向子元件傳遞內容 插槽位置 vue.component alert box 具名插槽定義 就是有名字的插槽 定義name header slot 內容solt header 內容h1 沒有名稱的話就匹配到沒有name屬性的插槽中 還可以使用template標籤進行使用 template只...