VUE中slot 插槽個人理解
個人理解:
1.通過插槽可以接收到父元件中的內容,也就是父元件把內容分發給子元件.
2.父元件分發的內容在子元件的那個位置顯示,依賴於slot 在子元件中的位置.
例如:
父元件:
<child>
<h2>child裡面的內容就是要分發給子元件的(也就是在父元件中使用子元件,包裹的那部分內容)</h2>
</child>
子元件:
<template>
<slot></slot>//我們父元件中的要分發的內容(也就是父元件中呼叫子元件,由子元件包裹的那部分內容),會替換我們的slot標籤,以及slot標籤內部包裹的內容,當然沒有要分發的內容,那麼就顯示slot 內包含的內容,如果slot內沒有內容就不顯示.
, </template>
插槽分為:單個插槽/具名插槽/作用域插槽
單個插槽: 也就是普通插槽, <slot></slot>
具名插槽: 插槽slot標籤上面有 name 屬性 ,<slot name="one"></slot> 對應的父元件要分發的那部分內容中有對應的
<div slot="one"></div>,子元素中 的name對應著父元件中的 slot.
作用於插槽: 就是將子元件中的值,傳遞到付元件中使用.
父元件:
<child>
<template slot-scope="slotProps"></template>//slotProps 是一個物件,在template裡面我們可 以slotProps.xxxx 來使用.
</child>
子元件: <slot v-for = "item of list" :item = item></slot>//list 是子元件中的資料