vue solt(插槽)用法小结

之前看vue官方文档，对slot插槽分发理解模糊，最近项目中使用了slot，便梳理总结了一下，如下为我的理解：

一般vue的slot用法有两种，一种是单独使用，一种是具名solt

1.单独使用：

  如下，如果子组件中没有使用slot,则父组件中的文本不会显示：

  父组件代码：

  

  子组件代码：

  

  运行现象：

  

 当子组件使用slot分发时，具体代码和现象如下：

 子组件：

 

运行现象：

2.具名slot

  <slot>元素在子组件中定义属性name的值，与父组件中的slot值相呼应，则分发成功；否则，分发失败

如下：

父组件：

子组件：

运行现象：