vue slot插槽使用个人理解

最近项目不忙，看了看vue，看到了slot，练习了下，与大家分享下，希望有用～

 

个人理解：用法等同于“占位符”，占据一定的“位置”，进行不同的回显，可以设置默认值，效果类似于v-if，但是功能更丰富

 

slot用法一（基础用法）

子组件代码设置如下：

父组件代码设置如下：

页面回显如下：

子组件child中添加slot占位符，设置默认值，在父组件中引用渲染子组件占位符回显默认内容；

在父组件中给子组件标签内写入内容，案例代码如下：

    
    
        测试
    

在写入一个按钮节点后，页面回显如下：

子节点中的slot内容被父节点内容所替代；

总结：此时slot被作为占位符所使用，无内容时回显默认内容，当有内容时回显内容，效果有点类似于input的placeholder属性的效果；

 

slot用法二（多个slot同时使用）

子组件代码设置如下：

页面回显如下：

但是此时控制台会有如下警告：

来自有道翻译的解释：在同一渲染树中发现的插槽“默认”的重复存在-这可能会导致渲染错误。

此时用slot的属性name来设置额外的插槽；

页面回显如下：

这是因为定义了slot的name名称后在使用时也要添加相应的配置，制定渲染的插槽（sloat标签）；

父组件代码设置如下：

页面回显如下：

第二个插槽（slot标签）被dom节点所覆盖，第一个和第三个不变；

总结：此时slot被作为可指定的占位符所使用，slot标签通过设置name属性进行区分，在父组件调用子组件时通过给子组件设置slot属性的方法设置作用的slot；

 

 

ps：以上就是我对slot的理解，不足之处欢迎评论指正交流～