Vue 插槽的基本用法

本文详细介绍了Vue.js中的插槽机制,包括基本概念、前置条件使用、默认插槽、具名插槽以及作用域插槽,展示了如何利用插槽实现组件间的灵活内容传递和数据共享。
摘要由CSDN通过智能技术生成

1.基本概念

        Vue.js 的插槽 (Slots) 是一种强大的功能,允许您定义可重用的模板片段,然后在组件的多个位置插入这些片段。通过插槽,您可以构建复杂的组件结构,同时保持代码的清晰和可维护性。

2.前置条件

插槽是基于组件的所以要有组件

父页面

<template>
    <div>
        <h1>{{ key }}</h1>
        <hr/>
        <!--
         slot:插槽 ,可以用于在父组件中 传1段 Html 到子组件中的指定位置
        -->
        <ShowPage>
          
        </ShowPage>
        
    </div>
</template>

<script>
    
    import ShowPage from '../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>

3.默认的插槽

在父页面的 ShowPage 标签中 加入

<div style="color: red;">
                新的一天
            </div>

在子组件的 class='default' div中加入 

<slot></slot>

就可以把父页面中定义的 红色的"新的一天" 加入到子组件中不需要传值。

4.具名插槽:

您还可以定义具名插槽,这样您可以在父组件中明确指定要插入到哪个插槽的内容。

父页面加入:

<template v-slot:blue>
                <div style="color: blue;">
                    蓝蓝的天 
                </div>
            </template>

子组件中加入:

<h3>
            <slot name="blue"></slot>
        </h3>

就可以把父页面中定义的 蓝色的"蓝蓝的天" 加入到子组件中的h3标签中,

如果不指明就会加到 class='default' 的div标签中。


5.作用域插槽:


有时,您可能希望插槽的内容可以访问到父页面的数据或者子组件的数据能回传给父页面。

为此,您可以定义一个作用域插槽。(作用域插槽就是具名插槽的的扩展

父页面修改:

<template v-slot:blue="{title}">
                <div style="color: blue;">
                    蓝蓝的天 -- {{ title }}
                </div>

            </template>

子组件修改:

<h3>
            <!-- 把子组件的属性返回给父组件 -->
            <slot name="blue" :title="key"></slot>
        </h3>

就可以把子组件中定义的 key 的内容传给父组件拼到 蓝蓝的天 -- 的后面

然后再传回加入到子组件中的h3标签中。

  • 17
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cssl-虞老师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值