详细解释Vue组件的作用域

在编写范围槽之前，介绍Vue中的槽内容分布：

如果子组件/子组件标签之间没有插入这两个P标签，页面将显示子组件模板中定义的内容“P父组件如果没有插入内容，我将显示/p”，但是如果子组件/子组件标签之间有插入内容，那么子组件模板中的槽/槽标签以及它们之间的内容将被子组件/子组件标签之间插入的内容替换。

这里，子组件槽中的备用内容的范围是子组件本身；

范围槽：

显示结果：

在模板中，您可以通过临时变量props从子组件槽中访问数据msg

范围槽更具代表性的用例是列表组件：

子组件my-list/my-list接受父组件传递的书籍数组。并在名为book的槽上使用v-for循环，同时公开变量bookName，这样就可以通过父组件的my-list标签中的props.bookName访问绑定的数据；

范围槽的使用场景：既可以重用子组件的槽，又可以使槽内容不一致；

补充：了解vue插槽和示波器插槽

插槽：

Slot，也就是slot，是一个组件的HTML模板。该模板的显示是不现实的，其显示方式由父组件决定。slot模板是一个slot，它是一个空壳，因为它的显示和隐藏，以及最终显示什么html模板都是由父组件控制的。但是槽的显示位置是由子组件决定的，父组件发送的模板将在以后随着槽写入组件模板而显示。这样，组件的可重用性更高、更灵活。在任何时候，我们都可以通过父组件向子组件添加一些需要的东西。

范围槽：

插槽可以控制html模板的显示和不显示。作用域槽实际上是包含数据的槽。最初，父组件可以通过绑定数据传递给子组件。范围槽可以通过子组件绑定数据传递给父组件。

ulli v-for=' todo in todos ' v-bind : key=' todo . id '！-我们为每件事都准备了一个空位，-！-传入“todo”对象作为插槽的道具。-插槽v-bind : to=todo！-回滚内容-{ { todo . text } }/slot/Li/ult todo-listv-bind : todos=' todos '！-将‘slot props’定义为槽作用域的名称-模板槽-作用域=‘slot props’！-为待办事项自定义模板，-！-通过slotProps '定制每个待办事项。-span v-if=' slotprops。todo . is complete/span { { slot props }。todo . text } }/template/todo-list slot-scope相当于一个对象，这个对象中的数据是从子组件slot绑定传输过来的。在vue 2.5.0中，插槽范围不再局限于模板元素，而是可以用于插槽中的任何元素或组件。

摘要

以上是边肖介绍的Vue组件的范围槽。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！