vue 插槽可用于父组件在子组件插入内容,其位置由子组件决定
1、默认插槽
在btntest子组件设置slot占位符
<div> <p> <!--默认插槽--> <slot></slot> </p> </div>
在父组件直接写入要显示的内容
<btn-test> <!--插入显示的内容--> <button>按钮</button> </btn-test>
运行结果:
2、具名插槽
单需要使用多个插槽时,可便于区别是哪个插槽,需要插到哪里去
子组件:slot name属性绑定名称
<p> <!--具名插槽--> <slot name="header"></slot> <slot name="footer"></slot> </p>
父组件:用slot属性获取名称
<btn-test> <template slot="footer"> <div>具名插槽:底部</div> </template> <template slot="header"> <div>具名插槽:头部</div> </template> </btn-test>
运行结果:
即使在父组件吧底部和头部反过来写,起插入位置也不会乱
3、作用域插槽
所以作用域插槽是一种子传父传参的方式,解决了普通slot在parent中无法访问child数据的问题
子组件
<slot name="content" :user="user"> </slot>
js 部分
export default { name: "", data(){ return { user:{ name:'lin' } } } }
父组件
<template slot-scope="scope"> 作用域插槽:{{scope.user.name}} </template>