解决报错:‘v-slot‘ directive must be owned by a custom element
父组件://简写方式:
·
v-slot具名插槽的使用:
父组件: <template v-slot:name1="data1"> //简写方式: <template #name1="data1"
子组件:对应: slot name='name1' :data2="childData"><slot>
我报错原因是将具名插槽的写法写反了,父组件和子组件写法写错,修改后正常运行。注意:使用具名插槽,需要用template标签包裹着,并使用v-slot:name。
子组件中定义插槽:
<template>
<div class="tab-bar-item">
<!-- 定义插槽 -->
<slot name="item-icon"></slot>
<slot name="item-text"></slot>
</div>
</template>
父组件使用具名插槽:
<tab-bar-item>
<!-- 使用具名插槽,需要用template标签包裹着,并使用v-slot:name -->
<template v-slot:item-icon>
<img src="./assets/img/tabbar/home.png"/>
</template>
<template v-slot:item-text>
<div>首页</div>
</template>
</tab-bar-item>
更多推荐
已为社区贡献1条内容
所有评论(0)