vue具名插槽的基本使用实例

前言

具有名字的插槽slot使用 中的 "name" 属性绑定元素

注意:

1,如果没有匹配到 则放到匿名的插槽中

2,具名插槽的渲染顺序,完全取决于模板,而不是取决于父组件中元素的顺序

vue的匿名插槽(默认插槽)

父组件

我是刚刚

子组件

vue的具名插槽

父组件

我是刚刚

子组件

渲染出来(大致顺序)即为

vue具名插槽的基本使用实例_第1张图片

vue具名插槽的基本使用实例_第2张图片

vue具名插槽的基本使用实例_第3张图片

vue的作用域插槽

大白话解释作用域插槽:父组件可以通过插槽读到子组件对应插槽所带的数据
父组件

我是刚刚

子组件

代码优化

我是刚刚

子组件

总结

到此这篇关于vue具名插槽基本使用的文章就介绍到这了,更多相关vue具名插槽内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(vue具名插槽的基本使用实例)