Vue.js中slot插槽解析
程序员文章站
2023-11-29 12:09:16
vue.js中slot插槽
1.个人理解:中,如果我们不使用插槽slot元素,那么我们在组件中放入任何元素或内容都是不会显示,也就是说放入的元素会被抛弃;使用插槽slot可以向组件内部制定位置传递内...
vue.js中slot插槽
1.个人理解:中,如果我们不使用插槽slot元素,那么我们在组件中放入任何元素或内容都是不会显示,也就是说放入的元素会被抛弃;使用插槽slot可以向组件内部制定位置传递内容;也就是说
2.分类
2.1 "单个插槽"又叫"匿名插槽"或"默认插槽"
该插槽可以放到组件的任意位置,但是只能放一个;举例如下
父组件:
这个是父组件
语文
子组件:
这里是子组件
最终显示结果是:
这个是父组件
这里是子组件
语文
ps:这里如果吧子组件里面的slot删除掉,那么就只能看到
这个是父组件
这里是子组件
2.2 具名插槽
有些时候我们需要多个插槽。但是我们又希望可以找到对应的插槽,官方给我们提供了一个
export default {
data: function(){
return {
data: [1,2,3,4,5];
}
},
}
子组件
这是子组件
// 作用域插槽
export default {
data: function(){
return {
data: [1,2,3,4,5];
}
}
}
使用
{{item}}这是父组件