vue3插槽的简写

使用#来替代v-slot的使用

把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:footer可以被重写为 #footer,注意点是当具名插槽和匿名插槽混用时需要，父组件上的写法必须携带#default或者v-slot:default

父组件

在调用子组件时需要在插槽内容位置加一层template标签，父组件上的内容会直接出现在子组件对应的插槽位置

     <demo-child>
        <template #title>
            <div>
                具名插槽
            </div>
        </template>
    </demo-child>
    <demo-child>
        <template #default>
            <div>
                默认插槽
            </div>
        </template>
    </demo-child>
    <demo-child>
        <template #foot="msg">
        	<p>作用域插槽</p>
            <div>
                {
   
   {msg.footerMsg}}
            </div>
        </template>
    </demo-child>
    <!-- 等效写法
    <demo-child>
        <template v-slot:foot="msg">
            <div>
                {
    
    {msg.footerMsg}}
            </div>
        </template>
    </demo-child> -->

子组件demoChild

设置footerMsg的值 const footerMsg = ref(‘这是footer’)

 	  <slot name="title"></slot>
      <slot></slot>
      <slot name="foot" :footerMsg="footerMsg"></slot>

html显示效果

title插槽
默认插槽
这是footer