vue插槽有什么作用,vue.js插槽

　　本文主要介绍Vue中的slot，通过示例代码非常详细的介绍，对大家的学习或者工作有一定的参考价值。有需要的朋友下面和边肖一起学习。

　　vue中代码的复用为我们提供了mixnis的复用。模板和插槽。

　　槽的分类

　　默认插槽

　　具名插槽

　　作用域插槽

　　当我们只需要在组件中插入一个html标签时，我们可以使用默认的插槽，

　　如果有多个插槽，我们必须给第一个插槽命名，以决定插入哪个插槽。

　　当我们想在我们的槽中使用组件中的数据时，我们可以使用作用域槽。

　　下面展示一下， 默认插槽的用法

　　使用时

　　以上就是默认插槽的使用

　　命名插槽，也就是说，我们在组件中设置一个或多个插槽。为了区分应用于哪个插槽，给插槽起个名字来区分。

　　使用的时候

　　这里，Vue 2.6版有一个新的slot写方法，其中使用了template标签。我们知道模板只是一个包标签，不会在真实页面上渲染。新槽写法是要用的，但是没有是不行的，如下图。

　　我们来谈谈作用域插槽。

　　让我们来看看。上面两个槽显示的数据都放在槽的用户关于组件的数据里。

　　但有时，用户并不关心从目录组件中获取的数据。

　　用户只需要管理槽中内容的呈现形式，

　　此时，将使用作用域插槽。

　　在上图中，您可以看到两条数据在作用域槽中被传递给消费者。

　　用户如何接收和使用它？

　　以上是vue的三个槽的使用方法。

总结

　　本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。