作用域插槽之 v-slot 的使用

Vue插槽的使用

记录插槽的使用

---

目录

Vue插槽的使用

注意

一、注册自定义子组件

二、使用组件

---

---

注意

插槽内容能够访问子组件中才有的数据，即获取子组件slot中携带的数据

---

一、注册自定义子组件

Vue.component('custom-current-user',{
    data(){
        return {
            users:{
                firstName: '作用域插槽',
                lastName:"插槽"
            }
        }
    },
    template:
    `<div>
        <p>绑定在slot 元素上的 attribute 被称为 插槽prop , <b>使用带值的v-slot 来定义我们提供的插槽prop的名字</b></p>
        <span><slot v-bind:users="users"></slot></span>
    </div>`
});

 注意：是获取子组件的数据，故数据定义在子组件中，否则会一直报错，找不到定义。

二、使用组件

<div>
                         <h4>作用域插槽</h4>
                         <custom-current-user>
                             <template v-slot:default="slotProps">{{slotProps.users}}</template>
                         </custom-current-user>

                     </div>

---

效果：