Vue.js中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];

}

}

}

使用