vue插槽 v-slot

vue插槽 v-slot

• 在vue的2.60版本以上将使用v-slot，弃用slot和slot-scope

• v-slot：slotName具名插槽，取代了slot：slotName

• v-slot：slotName=“slotProps” 作用域插槽，取代了slot-scope=“props”

• v-slot使用插槽 prop命名为slotProps，插槽 prop 的名字也可以使用任意你喜欢的名字，能在父组件调用子组件数据，即子组件提供的内容是在父级渲染的。

• v-slot可以简写为“#”，默认slot没有取名字，写为：v-slot：default，简写为： #default或者#，不写default。

• v-slot必须使用在template和自定义组件上，不能使用在普通html标签上

• template是不占用html节点的，因此不会再页面增加html节点的

• 只要出现多个插槽，始终为所有的插槽使用完整的基于 的语法
  例子：
  父组件（ParentComponent）：

<template>
    <div  class="menu-view">
        <my-list>
            <!-- <template v-slot:header = "slotProps"> -->
            <template #header="slotProps">
                <h3>头部显示{{slotProps.list.name}}</h3>
            </template>
            <template #footer>
                <h2>底部显示</h2>
            </template>
            <template #default>
                默认显示
            </template>
        </my-list>
    </div>
</template>

<script>
import MyList from '@/pages/user/children/MyList'

export default {
    components:{MyList},

    data(){
        return{
            user:{
              name:"zhuanghua"
            }
        }
        
    },  
}
</script>

子组件（MyList.vue）:

<template>
    <div class="my-list">
        <slot name="header" :list="user"></slot>      
        <slot name="footer"></slot>
        <slot></slot>
    </div>
</template>

<script>
export default {
    data(){
        return{
           user:{
               name:"妆化"
           }
        }
        
    }
}
</script>

界面显示：