Vue.js 的插槽 (Slots) 是一种强大的功能，允许您定义可重用的模板片段，然后在组件的多个位置插入这些片段。通过插槽，您可以构建复杂的组件结构，同时保持代码的清晰和可维护性。
插槽是基于组件的所以要有组件
父页面
<template>
<div>
<h1>{{ key }}</h1>
<hr/>
<!--
slot:插槽 ,可以用于在父组件中 传1段 Html 到子组件中的指定位置
-->
<ShowPage>
</ShowPage>
</div>
</template>
<script>
import ShowPage from 'https://blog.csdn.net/shark1978/article/components/ShowPage.vue' ;
export default {
name: 'Test6',
data () {
return {
key: '测试6-组件测试'
}
},
components: {
ShowPage
}
}
</script>
子组件
<template>
<div>
<h2>{{ key }}</h2>
<div class='default'>
</div>
<hr/>
</div>
</template>
<script>
export default {
name: 'ShowPage',
data () {
return {
key: 'slot测试'
}
}
}
</script>
在父页面的 ShowPage 标签中 加入
<div style="color: red;">
新的一天
</div>
在子组件的 class='default' div中加入
<slot></slot>
就可以把父页面中定义的 红色的"新的一天" 加入到子组件中不需要传值。
您还可以定义具名插槽，这样您可以在父组件中明确指定要插入到哪个插槽的内容。
父页面加入：
<template v-slot:blue>
<div style="color: blue;">
蓝蓝的天
</div>
</template>
子组件中加入：
<h3>
<slot name="blue"></slot>
</h3>
就可以把父页面中定义的 蓝色的"蓝蓝的天" 加入到子组件中的h3标签中，
如果不指明就会加到 class='default' 的div标签中。
有时，您可能希望插槽的内容可以访问到父页面的数据或者子组件的数据能回传给父页面。
为此，您可以定义一个作用域插槽。（作用域插槽就是具名插槽的的扩展）
父页面修改：
<template v-slot:blue="{title}">
<div style="color: blue;">
蓝蓝的天 -- {{ title }}
</div>
</template>
子组件修改：
<h3>
<!-- 把子组件的属性返回给父组件 -->
<slot name="blue" :title="key"></slot>
</h3>
就可以把子组件中定义的 key 的内容传给父组件拼到 蓝蓝的天 -- 的后面
然后再传回加入到子组件中的h3标签中。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/23628.html