参考教程
插槽的使用
简单使用
子组件 cart 组件
<div>
<h2>插槽组件</h2>
<slot>阿萨德</slot>
</div>
父组件
<cart id="'a'" name="'b'">
<div>父组件中的插槽</div>
</cart>
此时显示的内容是 父组件中的插槽 。如果没有 slot,则不会显示父组件的DIV内容
总结:如果子组件没有使用插槽,父组件如果需要往子组件中填充模板或者html, 是没法做到的
有name的插槽
如果子组件有name,没有空的slot ,而父组件不指定name,则template 里面的内容不显示。
所以子组件有name,父组件一定要通过 v-slot绑定name名
子组件
<template>
<div>
<h2>插槽组件</h2>
<slot name="slot1" ></slot>
<slot>子组件的默认slot2</slot>
</div>
</template>
父组件
<cart id="'a'" name="'b'">
<template v-slot:slot1>
<h1>我是子组件</h1>
</template>
<template >
<h1>我是子组件2</h1>
</template>
</cart>