插槽"/>
手牵手学习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理解的并没有很深,只是会用的程度,大多数情况,这些事够用的。
更多推荐
手牵手学习vue之详解slot插槽
发布评论