三、具名插槽(命名插槽)
補充當我們使用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只...