前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue 插槽之 作用域插槽「建议收藏」

Vue 插槽之 作用域插槽「建议收藏」

作者头像
全栈程序员站长
发布2022-07-28 20:27:58
3300
发布2022-07-28 20:27:58
举报

大家好,又见面了,我是你们的朋友全栈君。

现在我有如下需求,子组件 <user /> 中此时有一条用户的信息(userInfo);我要在父组件通过插槽展示这个用户的姓名(userInfo.name);

注意:这里的父组件并没有这个用户的信息,子组件中有,如果直接在父组件{ {userInfo.name}} 获取这条信息是获取不到的;因为,只有 <user /> 组件可以访问到 userInfo,而我们提供的内容是在父组件渲染的; 模板在哪写,就是用哪里的变量,跟插槽用在哪无关 模板是在父组件中写好,被编译过后,传到子组件的插槽中的

为了让父组件的插槽内容可以读取到子组件的数据,我们可以将userInfo 作为一个 <slot> 元素的特性绑定上去;

代码语言:javascript
复制
// 子组件
const card = { 
   
    data() { 
   
        return { 
   
            userInfo: { 
   name: '宫鑫'}
        }
    },
    template: ` <div class='card'> <!-- 在插槽上绑定子组件的数据 --> <slot :userInfo="userInfo"/> </div> `
};

绑定在 元素上的特性被称为插槽 prop。现在在父级作用域中,我们可以给v-slot带一个值来定义我们提供的插槽 prop 的名字:

代码语言:javascript
复制
// 父组件
template: ` <div> <card> <template v-slot:default="userInfo"> 用户姓名: { 
    {userInfo}} </template> </card> </div> `

// 输出:
// 用户姓名: { "userInfo": { "name": "宫鑫" } }
在这里插入图片描述
在这里插入图片描述

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/129070.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年4月1,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档