欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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 具名插槽

有些时候我们需要多个插槽。但是我们又希望可以找到对应的插槽,官方给我们提供了一个元素特有的属性name;就是找到对应的插槽以免位置错乱.

//保留一个未命名插槽,这个插槽是默认插槽,也就是说它会作为所有未匹配到插槽的内容的统一出口

个人理解为其实就是使用了name给slot确定了位置,父组件中使用的时候,只要name对应上就可以了. 下面说下,作用域插槽 或者说是带数据的插槽 ps:作用域插槽,是子组件传递数据给父组件,父组件只用来决定如何展示. 作用域插槽要求,在slot上面绑定数据,如下所示

export default {

data: function(){

return {

data: [1,2,3,4,5];

}

},

}

子组件

这是子组件

// 作用域插槽

export default {

data: function(){

return {

data: [1,2,3,4,5];

}

}

}

使用