vue学习之路-组件(高级篇)-slot

组件定义出来实际上就是一个html标签,通过props为这个标签定义属性,通过自定义事件为这个标签添加change等等事件,插槽(slot)就是把这个html标签内的内容显示出来(可以是html,也可以是别的组件)。如果没有插槽这个html标签内的内容会被抛弃。

 

1.插槽内容

有一个写好的组件,在它的模板中这样写


  

然后在组件渲染的时候,这个标签内包含的任何内容会把这个元素替换掉。

如果 没有包含一个  元素,则任何传入它的内容都会被抛弃。

2.具名插槽

如果我们需要的个插槽,就需要多个元素,哪组件传入的内容怎么区分呢?元素有一个特殊的特性:name,可以解决这种问题。

我们有一个组件,模板如下:

当我们使用这个组件,向具名插槽提供内容的时候,可以在