【vue】插槽

插槽
    插槽内容
    编译作用域
        父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
    后备内容
        为插槽设置默认值。
    具名插槽
            //子组件中定义插槽
            <slot name="header"></slot>
            //父组件中传递插槽内容
            <template v-slot:header>
                <h1>Here might be a page title</h1>
            </template>

            没有写在具名插槽中的内容，默认传递到默认插槽中。
            默认插槽定义    <slot></slot>
            默认插槽传递内容 <template v-slot:default>内容</template>
    作用域插槽
        父组件插槽作用域使用子组件的对象
            <template v-slot:default="slotProps">
                {{slotProps.user.firstName}}
            </template>
        独占默认插槽的缩写语法：当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。
        <current-user v-slot="slotProps">
          {{ slotProps.user.firstName }}
        </current-user>
        解构插槽
        <current-user v-slot='{user}'>
            {{user.firstName}}
        </current-user>
        解构时设置默认值
        <current-user v-slot="{user = {firstName:'jack'}}">
            {{user.firstName}}
        </current-user>
        动态插槽名
        <base-layout>
          <template v-slot:[dynamicSlotName]>
            ...
          </template>
        </base-layout>
        具名插槽的缩写
        v-slot: 可以缩写为 #
        v-slot与slot,slot-scope的区别

        //v-slot
        //子组件暴露插槽变量
        <template>
            <slot name="column1" :row="{id:1, name:'jack'}">
        </template>
        //使用子组件插槽的变量
        <template v-slot:column1="row">
            {{row.name}}
        </template>

        //slot,slot-scope
        //子组件暴露插槽变量
        <template>
            <slot name="column1" :row="{id:1, name:'jack'}">
        </template>
        //使用子组件插槽的变量
        <template slot="column1" slot-scope="row">
            {{row.name}}
        </template>