当前位置 : 主页 > 网页制作 > html >

新版vue作用域插槽的使用

来源:互联网 收集:自由互联 发布时间:2021-06-12
2.6开始,作用域插槽的使用有了不同的地方; 作用域插槽的个人理解就是让子组件的数据可以在父组件中使用; 也是一个数据传递的方式了; 不多说,上代码 子组件定义一个插槽,并

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"
上一篇:WebAuthorize
下一篇:web-程序逻辑问题
网友评论