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

作用域插槽的個人理解就是讓子組件的數(shù)據(jù)可以在父組件中使用； 也是一個數(shù)據(jù)傳遞的方式了；

不多說，上代碼

子組件定義一個插槽，并且定義一個需要傳遞到父組件的數(shù)據(jù)

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上屬性數(shù)據(jù)的集合所有v-bind:user="user"

　　

總結(jié)

以上是生活随笔為你收集整理的新版vue作用域插槽的使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。