初识 Vue(20)---(作用域插槽)

本文介绍了Vue中作用域插槽的使用方法及应用场景,通过一个具体案例展示了如何在子组件循环过程中,通过父组件传递作用域插槽来定制化显示列表内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

作用域插槽

有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽,为了让这个特性成为可能,你需要做的全部事情就是将待办项内容包裹在一个 <slot> 元素上,然后将所有和其上下文相关的数据传递给这个插槽:

使用场景:当子组件做循环,或某一部分的DOM结构是由外部传递进来时

案例:子组件列表循环,传值到父组件中显示出来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的作用域插槽</title>
    <script src = './vue.js'></script>
</head>
<body>
    <div id ='root'>
       <child>
            <tempalte slot-scope="props"> 
                <li>{{props.item}} -hello</li>
            </tempalte>
       </child>
    <script>
    //在child中可以使用item 数据,item数据放到 props属性 中
       Vue.component('child',{
        data:function(){
            return{
                list:[1,2,3,4]
            }
        },
        //child 组件做列表的循环,列表中的每一项如何显示并不关心,显示由外部决定
        //外部组件调用chlid,需要向子组件传递slot,告知子组件如何显示列表的每一项
        //
        template:`<div>
                    <ul>
                        <slot 
                            v-for="item of list"
                            :item=item
                            >

                        </slot>

                    </ul>    
                </div>`
       })

       var vm = new Vue({
        el:'#root'
       })
    </script>   
</body>
</html>

输出:

执行逻辑:1.父组件调用子组件的时候,给子组件传入插槽

2.这个插槽是作用域插槽,必须是<template></template>样式,要声明在子组件接收到的数据都放在 solt-scope 中,即 props 中,还要告诉子组件模板的信息,如何展示,即 <li>{{props.item}} -hello</li>;

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值