Vue插槽slot详细解析

Vue插槽slot

在封装完一个组件后,当需要在不同的父组件中使用它时,对于不同组件有不同增加div等标签的需求,这时候需要在自组加添加一个slot占位符来防止父组件有新的添加内容。

slot相当于占位符,它在组件中给你的HTML模板占了一个位置,你来传入一些东西,它本身会被替换。

类别

默认插槽

具名插槽

作用插槽

插槽基本使用

父组件中


复制代码

子组件(children)


复制代码

效果图

Vue插槽slot详细解析_第1张图片

 

1.默认插槽


复制代码

2.具名插槽

其实就是在子组件中定义插槽时,给对应的插槽分别起个名字,方便后边插入父组件将根据name来填充对应的内容。

示例


复制代码

子组件中


复制代码

父组件


复制代码

效果图

Vue插槽slot详细解析_第2张图片

 

3.作用域插槽


复制代码

作用域插槽就是实现在子组件自行决定自己要显示什么内容

子组件可以在slot标签上绑定属性值,大概是说在作用域插槽内,父组件可以拿到子组件的数据

子组件中


复制代码

父组件中


复制代码

效果图

Vue插槽slot详细解析_第3张图片

 

你可能感兴趣的:(vue.js,javascript,前端)