首页 > 其他分享 >vue——插槽的作用与理解

vue——插槽的作用与理解

时间:2022-08-30 19:59:00浏览次数:57  
标签:vue 填充 作用域 插槽 html 理解 组件

1.作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件 ===> 子组件

2.分类:默认插槽、具名插槽、作用域插槽

3.使用方式:

默认插槽:

子组件:放一个占位符

父组件:在占位符填充内容

总结:如果子组件没有使用插槽,父组件如果需要在子组件中填充html,是不能做到的

具名插槽:就是为插槽取名字,一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字八内容填充到对应插槽张中

子组件:设置了两个插槽(center,footer)

父组件:通过slot的方式指定到对应的插槽

作用域插槽:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定)

子组件:

父组件:

 

标签:vue,填充,作用域,插槽,html,理解,组件
From: https://www.cnblogs.com/MDRY/p/16640586.html

相关文章