浅析vue插槽和作用域插槽的理解 - 行业资讯 - 肥雀云

插槽,也就是插槽,是组件的一块HTML模板,这块模板显示不现实,以及怎样显示由父组件来决定。

插槽模板是位置,它是一个空壳子,因为它显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置由子组件自身决定,槽写在组件模板的哪块,父组件传过来的模板将来就显示在哪块。这样就使组件可复用性更高,更加灵活。我们可以随时通过父组件给子组件加一些需要的东西。

这个可以参考https://www.jb51.net/article/160047.htm。这位作者写的很详细。

插槽可以控制html模板的显示与不显示。作用域插槽其实就是带数据的插槽。

原来父组件可以通过绑定数据传递给子组件。作用域插槽就可以通过子组件绑定数据传递给父组件。
　　

　　　　　　& lt; ul> 　　李& lt; 　　v代表=" todo行动计划” 　　v-bind:关键=" todo.id " 　　比; 　　& lt; !——我们为每个todo准备了一个插槽,——比; 　　& lt; !——将“待办事项”对象作为一个插槽的道具传入。——比; 　　& lt;槽v-bind: todo=按焓孪睢北? 　　& lt; !——回退的内容——比; 　　{{todo。文本}} 　　& lt;/slot> 　　& lt;/li> 　　& lt;/ul> 　　todo - list v-bind: & lt; todos=按焓孪睢北? 　　& lt; !——将“slotProps”定义为插槽作用域的名字——比; 　　& lt;模板slot-scope=皊lotProps”比; 　　& lt; !——为待办项自定义一个模板,——比; 　　& lt; !——通过‘slotProps定制每个待办项。——比; 　　& lt;跨度v=" slotProps.todo.isComplete "祝辞& # 10003;& lt;/span> 　　{{slotProps.todo。文本}} 　　& lt;/template> 　　& lt;/todo-list> 　　　　

slot-scope就相当于是一个对象,这个对象里面的数据就是子组件插槽绑定传上来了。

在vue 2.5.0 + slot-scope不再限制在& lt; template>元素上使用,而可以用在插槽内的任何元素或组件上。
　　

以上所述是小编给大家介绍的vue插槽和作用域插槽的理解,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持。
　　如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!