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://51itzy.com/kjqy/208053.html