前言:之前學vue對插槽只有乙個模糊的存值概念,最近在封裝自定義元件時,再次學習一下。
通過slot插槽向元件內部指定位置傳遞內容,通過slot可以父子傳參,簡化了進行自定義元件的封裝和使用。
自己對插槽理解
就是乙個站位html模板,用來攜帶內容,插入到合適的位置,由父元件來決定其顯示的內容,使得模組具有更強的復用性。
就是沒有名字的插槽,乙個元件裡面只允許存在乙個匿名插槽。父元件內容
class="fa">
父元件中寫的文字p>
child>
div>
複製**子元件內容
class="child">
匿名插槽的預設內容slot>
div>
複製**編譯結果如下:
class="fa">
class="child">
父元件中寫的文字p>
div>
div>
複製**
slot 元素有乙個name特性,可以為slot命名,多個 slot 可以有不同的名字,用來渲染不同的內容。父元件內容class="fa">
class="son"
slot="s1">
111span>
div>
class="son"
slot="s2">
222span>
div>
class="son">
333span>
div>
child>
div>
複製**子元件內容
class="child">
// s1插槽
name="s1">
slot>
// s2插槽
name="s2">
slot>
// 匿名插槽
slot>
div>
複製**編譯結果如下:
class="fa">
class="child">
class="son">
111span>
div>
class="son">
222span>
div>
class="son">
333span>
div>
div>
div>
複製**具名插槽的縮寫方式
class="fa">
class="son" #s1>
...div>
child>
div>
複製**
在父元件中渲染子元件的內容,並且將子元件資料傳遞到插槽中父元件內容class="fa">
v-slot="props">
}template>
child>
div>
複製**注意點1:在vue 2.6+中,如果只存在預設插槽,可以用以上簡寫法 ,否則必須完整書寫: v-slot:default="props" 注意點2:在vue 2.6+ 引入了v-slot 指令,在接下來所有的 2.x 版本中 slot 和 slot-scope 還可以使用,但不會出現在 vue 3.0 中,詳細的內容自己查閱官方文件吧。
子元件內容
class="child">
v-for="item of arr" >
:item="item">
slot>
li>
ul>
div>
data()
}複製**編譯結果如下:
class="fa">
class="child">
111li>
222li>
333li>
ul>
div>
div>
複製**從 vue2.6 開始,新增了動態指令引數,利用 [ ],如下例子:
v-bind:[attributename]="url" />
複製**
以上**在模板中相當於:data() }
複製**
還可以用於 v-on 繫結動態事件、a標籤 的連線等。
:src="url" />
複製**
v-slot:[slotname]>
...template>
child>
複製**
利用好插槽,可以提高**復用性。現在了解的只是很淺的東西,覺得不會的東西是越來越多了,哎呀,加油啦~
v-slot:default="props">
}template>
v-slot:s1="props">
}template>
child>
----------------------------------------兩種寫法,不可混用 -->
}template>
}template>
child>
複製**
vue插槽樣式 vue中的插槽slot
插槽 slot 是元件的一塊html模板,父元件決定這塊模板顯不顯示以及怎麼顯示。位置由子元件自身決定 slot現在元件template的什麼位置,父元件傳過來的模板將來就顯示在什麼位置 匿名插槽 只能有乙個,可以放在元件的任何位置 在父元件在裡面寫了html模組 子元件的匿名插槽被下面的div模板...
vue中的slot(插槽)
1 slot 基本用法 插槽指允許將自定義的元件像普通標籤一樣插入內容 import vue from vue 定義元件componentone const compoentone 呼叫元件 newvue el id data template 使用插槽 2 具名插槽 給具體的插槽命名,並在使用的時...
Vue中的插槽 slot
一 什麼是插槽?二 怎麼用插槽?2.1預設插槽 子元件 template div class slotcontent ul li v for item in items li ul div template script export default script style scoped styl...