怎样理解vue中的slot

插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。

Slot 是在组件模板中设置的用于在父组件中插入其孙子组件(即自身的子组件)或DOM片段的插槽。

匿名solt的使用

子组件中

我是子组件的标题

/*这里插入父组件在引用子组件内部的内容*/

父组件中

我是父组件的标题

这是一些初始内容

这是更多的初始内容

最后结果

我是父组件的标题

我是子组件的标题

这是一些初始内容

这是更多的初始内容

当我们要在一个组件中引入另外一个组件时,子组件就可以使用slot,父组件则引入子组件的组件名即可。

具名slot

具名Slot就是会为模板中不同部分指定相应的插入位置。但是当部分内容没有找到对应的插入位置,就会依次插入匿名的slot中,

当没有找到匿名slot时,这段内容就会被抛弃掉。

子组件中

父组件中


    

Lack of anonymous slot, this paragraph will not shown.

Here comes the footer content

Here comes the header content

最后结果

Here comes the header content

Here comes the footer content

Lack of anonymous slot, this paragraph will not shown.

你可能感兴趣的:(怎样理解vue中的slot)