vue3.0在使用具名插槽不显示

2022-07-26 Vue

插槽不渲染

vue（vue3.0）在使用具名插槽时显示为空白，展示不出来

原因

在vue3.0中，具名插槽的使用方式已经改变了，所以是渲染不出来的，自己看到，很明显代码“slot”不是深色的。

所以在 3.0中

  • 使用 v-slot 代替了 slot
  • 只能在template标签上使用 v-slot
 <el-form-item prop="email">
         <div slot="label">slot label</div>
         <el-input v-model="loginForm.email" placeholder="Email" />
</el-form-item>

 <el-form-item prop="email">
         <div slot="label">slot label</div>
         <el-input v-model="loginForm.email" placeholder="Email" />
</el-form-item>

image.png

这种写法 <div slot="label">slot label</div> 不会被complier所编译。

在3.0中必须使用 template v-slot才能显示出来

....
<el-form-item prop="email">
  <template v-slot:label>
        <span class="label">Email Address</span>
   </template>
   <el-input v-model="loginForm.email" placeholder="Email" />
 </el-form-item>
...

....
<el-form-item prop="email">
  <template v-slot:label>
        <span class="label">Email Address</span>
   </template>
   <el-input v-model="loginForm.email" placeholder="Email" />
 </el-form-item>
...

版权属于: vincent

本文链接:

转载时须注明出处及本声明

Tags:# Javascript # vue3
···