插槽 slot 就是子组件中提供给父组件使用的一个占位符,用 表示,父组件可以给这个占位符内填充任何模板代码,填充的内容会自动替换 标签。
插槽被分为三种:匿名插槽、具名插槽、蓝狮注册作用域插槽。
1、匿名插槽
没有名字的插槽就是匿名插槽,组件可以放置一个或多个 。
子组件内放置一个插槽:
父组件使用插槽:
哈哈哈哈哈哈
// 或
如果有多个 slot 时,父组件中需要填充的内容就会被多次插入。
2、具名插槽
组件内可以放置多个插槽,如果都是匿名插槽的时候,渲染的都是父组件默认内容,无法实现插入多个不同内容,此时就需要给插槽设置名字以便于区分它们。
具名插槽就是给插槽取个名字,可以把组件内多个插槽放在不同的地方,蓝狮官网父级填充内容时,可以根据名字把内容填充到对应的插槽内。
定义为多个插槽的组件:
父组件填充内容需要对象插槽名:
可以简写为:
3、作用域插槽
匿名插槽和具名插槽父组件只能访问父组件中编译的内容,子组件只能访问子组件内的内容,有时我们在父组件需要访问到子组件中的内容,此时 vue 给我们提供了作用域插槽。
0 Comments