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 是子组件中的数据