手牵手学习vue之详解slot插槽

插槽"/>

手牵手学习vue之详解slot插槽

• 什么是插槽

插槽就是在子组件中给父组件提供的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

• 匿名插槽

//父组件<template><div><slotButton>插槽按钮</slotButton></div>
</template><script>
import slotButton from "./slot-button";
export default {name: "slot",components: {slotButton}
};
</script>

// 子组件<template><div><button><slot></slot></button></div>
</template><script>
export default {name: "slot",data() {return {};}
};
</script>

• 具名插槽

有时我们需要多个插槽，给插槽命名方便定位。

// 父组件<template><div><slotName><div slot="header">header区域</div><div>main内容区域</div><div slot="footer">footer区域</div></slotName></div>
</template><script>
import slotName from "./slot-name";
export default {name: "slot",components: {slotName},data() {return {};}
};
</script>

// 子组件<template><div><slot name="header"></slot><slot></slot><slot name="footer"></slot></div>
</template>

• 作用域插槽  |  带数据插槽

官方叫它作用域插槽，实际上，对比前面两种插槽，我们可以叫它带数据的插槽。什么意思呢，就是前面两种，都是在组件的template里面写。

// 父组件<template><div><slotScope><template v-slot:default="userInfo"> 用户姓名： {{ userInfo }} </template></slotScope></div>
</template><script>
import slotScope from "./slot-scope";
export default {components: {slotScope}
};
</script>

// 子组件<template><div><slot :userInfo="userInfo"></slot></div>
</template><script>
export default {name: "slotScope",data() {return {userInfo: { name: "宫鑫" }};}
};
</script>

说明：slot理解的并没有很深，只是会用的程度，大多数情况，这些事够用的。