Vue 插槽之 作用域插槽
现在我有如下需求,子组件 <user /> 中此时有一条用户的信息(userInfo);我要在父组件通过插槽展示这个用户的姓名(userInfo.name);注意:这里的父组件并没有这个用户的信息,子组件中有,如果直接在父组件{{userInfo.name}} 获取这条信息是获取不到的;因为,只有 <user /> 组件可以访问到 userInfo,而我们提供的内容是在父.
·
现在我有如下需求,子组件 <user />
中此时有一条用户的信息(userInfo
);我要在父组件通过插槽展示这个用户的姓名(userInfo.name
);
注意:这里的父组件并没有这个用户的信息,子组件中有,如果直接在父组件{{userInfo.name}}
获取这条信息是获取不到的;因为,只有 <user />
组件可以访问到 userInfo
,而我们提供的内容是在父组件渲染的;
模板在哪写,就是用哪里的变量,跟插槽用在哪无关
模板是在父组件中写好,被编译过后,传到子组件的插槽中的
为了让父组件的插槽内容可以读取到子组件的数据,我们可以将userInfo
作为一个 <slot>
元素的特性绑定上去;
// 子组件
const card = {
data() {
return {
userInfo: {name: '宫鑫'}
}
},
template: `
<div class='card'>
<!-- 在插槽上绑定子组件的数据 -->
<slot :userInfo="userInfo"/>
</div>
`
};
绑定在 元素上的特性被称为插槽 prop。现在在父级作用域中,我们可以给v-slot
带一个值来定义我们提供的插槽 prop 的名字:
// 父组件
template: `
<div>
<card>
<template v-slot:default="userInfo">
用户姓名: {{userInfo}}
</template>
</card>
</div>
`
// 输出:
// 用户姓名: { "userInfo": { "name": "宫鑫" } }
更多推荐
已为社区贡献4条内容
所有评论(0)