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>
效果: