我们知道vue项目通常由多个组件构成。然而在使用父子组件的时候,总想在父组件中自定义一些标签来插入到内部子组件中,而在vue2.1.0+新增了一种插槽机制。
插槽子组件中给你的HTML模板占了一个位置。插槽又分为 匿名插槽、具名插槽、作用域插槽。
1.匿名插槽
当slot没有指定name属性值的时候,它隐藏的name属性为default。一个组件内只有有一个匿名插槽。
父组件:
我是父组件
我是默认的插槽
子组件: child.vue
我是子组件
匿名插槽效果
2.具名插槽
具名插槽就是给插槽进行命名。父组件在调用的时候,可以使用v-slot绑定名称从而实现对应,v-slot也可以缩写为# 。
子组件:
父组件:
3.作用域插槽
当你想在一个插槽中使用数据时,就要使用作用域插槽的方式。
为了让 子组件中的数据 在父级的插槽 内容中可用我们可以将 数据 作为 元素的一个特性绑定上去: v-bind:text="text"。
注意:
匿名的作用域插槽和具名的作用域插槽 区别在v-slot:defult="接受的名称"(defult(匿名的可以不写,具名的相反要写的是对应的name))
v-solt可以解构接收 解构接收的字段要和传的字段一样才可以 例如 :one 对应 v-slot="{one}"
页面更新:2024-05-15
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号