1. 程式人生 > >VUE中slot 插槽個人理解

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 是子元件中的資料