vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue插槽和作用域插槽

浅析vue插槽和作用域插槽的理解

作者:清风了了

插槽,也就是slot,是组件的一块HTML模板,这块模板显示不现实、以及怎样显示由父组件来决定。这篇文章主要介绍了浅析vue插槽和作用域插槽的理解,需要的朋友可以参考下

插槽:

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

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

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

作用域插槽:

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

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

<ul>
 <li
 v-for="todo in todos"
 v-bind:key="todo.id"
 >
 <!-- 我们为每个 todo 准备了一个插槽,-->
 <!-- 将 `todo` 对象作为一个插槽的 prop 传入。-->
 <slot v-bind:todo="todo">
  <!-- 回退的内容 -->
  {{ todo.text }}
 </slot>
 </li>
</ul>
<todo-list v-bind:todos="todos">
 <!-- 将 `slotProps` 定义为插槽作用域的名字 -->
 <template slot-scope="slotProps">
 <!-- 为待办项自定义一个模板,-->
 <!-- 通过 `slotProps` 定制每个待办项。-->
 <span v-if="slotProps.todo.isComplete">✓</span>
 {{ slotProps.todo.text }}
 </template>
</todo-list>

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

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

总结

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

您可能感兴趣的文章:
阅读全文