新版vue作用域插槽的使用

Posted 2022-08-30 qqfontofweb

2.6开始，作用域插槽的使用有了不同的地方；

作用域插槽的个人理解就是让子组件的数据可以在父组件中使用；  也是一个数据传递的方式了；

不多说，上代码

子组件定义一个插槽，并且定义一个需要传递到父组件的数据

html:

<template>
    <div class="card-wrap">
         
        <div class="foot">
            <slot name="todo" v-bind:user="user">
                
            </slot>
        </div>
         
    </div>
</template>

　　js:

export default 
    data()
        return
             user:
                 lastname:‘qiao‘,
                 age:12,
                 firstName:‘zhang‘
             
        
    

　　

 

父组件中使用：

首先引用组件并且注册；

然后使用如下

 <Card>
           
                <template v-slot:todo="slotProps">
                    slotProps.user.age
                    slotProps.user.lastname
                </template>
                 
           
        </Card>

//slotProps 可以随意命名
//slotProps 接取的是子组件标签slot上属性数据的集合所有v-bind:user="user"