vue3作用域插槽,vue 组件插槽,详解Vue组件之作用域插槽

vue3作用域插槽,vue 组件插槽,详解Vue组件之作用域插槽

本文主要介绍Vue组件的作用域插槽。本文通过示例代码向您详细介绍,具有一定的参考价值。有需要的朋友可以参考一下。

在写作用域槽之前,我们先介绍一下Vue中的槽内容分布:

如果两个P标签未插入子组件/子组件标签之间,页面将显示内容“P如果没有插入内容,将显示父组件/p”在子组件模板中定义,但是如果在子组件/子组件标签之间有插入内容,则子组件模板中的插槽/插槽标签和它们之间的内容将被替换为子组件/子组件标签之间插入的内容。

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

作用域插槽:

显示结果:

在模板内,可以通过临时变量props访问来自子组件槽的数据消息。

作用域插槽的一个更有代表性的用例是列表组件:

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

作用域slot的使用场景:子组件的slot可以复用,slot的内容可以不一致;

补充:vue插槽和作用域插槽的理解

插槽:

Slot,即slot,是一个组件的HTML模板。这个模板的显示是不现实的,如何显示是由父组件决定的。slot就是slot,是一个空壳,因为它的显示和隐藏,最后显示哪个html模板都是由父组件控制的。但是槽位显示的位置是由子组件决定的,槽位写在组件模板的什么位置,父组件发来的模板以后会显示在什么位置。因此,组件的可重用性更高,也更灵活。我们总是可以将父组件需要的东西添加到子组件中。

作用域插槽:

插槽可以控制html模板的显示和不显示。作用域槽实际上是一个有数据的槽。原来父组件可以通过绑定数据传递给子组件。作用域槽可以通过子组件绑定数据传递给父组件。

ulli

v-for=todo in todos

v-bind:key=todo.id

!-我们为每个待办事项准备了一个时间段,-

!-将todo对象作为槽的道具传入。-

插槽v-bind:todo=todo

!-回滚的内容-

{{ todo.text }}

/插槽

/李

/ul todo-list v-bind:todos= todos

!-将slotProps定义为插槽作用域的名称-

模板插槽范围=slotProps

!-为待办事项自定义模板,-

!-通过slotProps定制每个待办事项。-

span v-if= slot props . todo . is complete /span

{{ slotProps.todo.text }}

/template/todo-list

Slot-scope相当于一个对象,这个对象中的数据由子组件slot binding上传。在Vue 2.5.0中,slot-scope不再局限于模板元素,而是可以在slot中的任何元素或组件上使用。

总结

以上是边肖推出的Vue组件的示波器插槽。希望对你有帮助。如果您有任何问题,请给我留言,边肖将及时回复您。非常感谢您对我们网站的支持!

vue3作用域插槽,vue 组件插槽,详解Vue组件之作用域插槽