vue组件插槽(父组件标签中slot,子组件标签name)

有一个组件叫card,在父组件中引入之后结构是:

<card>
    <div slot="sonSlot">
        内容内容内容内容内容内容内容内容内容
    </div>
</card>

html结构中写入card标签,在标签内插入一个div slot属性是sonSlot;

子组件中的结构:

<div id="card">
    ...子组件的内容...
    <div name="sonSlot"></div>
</div>

子组件中有个属性name,值为sonSlot 的div;

父组件中的

<div slot="sonSlot">
        内容内容内容内容内容内容内容内容内容
    </div>

这一段内容就会插入到子组件中的属性name,值为sonSlot的div中.实现插槽