Vue元件插槽

2021-10-10 01:39:58 字數 401 閱讀 9899

三、具名插槽(命名插槽)

補充當我們使用vue元件時,常常遇到子元件的部分布局在不同的路由元件上表現不同的情況,vue為了幫助我們開發者解決這個問題,新增了插槽這個功能

插槽即佔位符:實現元件在不同父元件中使用,內部可以有不一樣 **塊(html)

**如下(示例):

**如下(示例):

當乙個子元件內,需要多個插槽時,需要給插槽進行命名,使用元件時,元件中的內容,可以有針對的灌入不同的命名的插槽中

在使用元件時,內容中如果沒有加slot屬性對應命名插槽,會預設灌入到沒有名字的slot中

vue 元件插槽詳述

在使用元件時,在引用的元件標籤中新增內容時,會自動被元件中的模板代替,如 例1 例1 vue.component my comp 結果 當不想要傳遞給元件的內容被替代,則可以使用元件插槽來解決這個問題,具體使用方法是,在元件模板中新增 標籤,當元件渲染時,將會被替換為 寫在元件標籤結構中的內容 如 ...

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只...