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": "宫鑫" } }

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

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

(1)
上一篇 2022年4月13日 上午7:00
下一篇 2022年4月13日 上午7:20


相关推荐

  • docker入门(三):容器数据卷与DockerFile脚本,使用阿里云镜像仓库[通俗易懂]

    docker入门(三):容器数据卷与DockerFile脚本,使用阿里云镜像仓库[通俗易懂]一、容器数据卷用于数据保存和持久化,简单的理解,就是容器和主机共享的一个公共硬盘,举个例子,原本tomcat部署应用,或者查看日志还需要进入容器,现在将日志文件夹和部署文件夹拿出来挂载到主机,就可以

    2022年8月16日
    10
  • 编写js程序实现n的阶乘_javascript矩阵算法

    编写js程序实现n的阶乘_javascript矩阵算法定义一个函数,算出n的阶乘/**定义一个函数,算出n的阶乘*/letx=Number(window.prompt(‘请输入求阶乘的数:’));console.log(jCheng(x))functionjCheng(x){ returnx<2?1:x*jCheng(x-1)}

    2026年4月14日
    6
  • mysql navicat 15 激活码【2021免费激活】

    (mysql navicat 15 激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~1S…

    2022年3月27日
    339
  • 魔力宝贝服务端架设_魔力宝贝怀旧手游

    魔力宝贝服务端架设_魔力宝贝怀旧手游CC魔力宝贝服务端setup.cf解释#blserv=211.232.109.164//bl服务器地址#blserv=127.0.0.1//bl服务器端口blserv=222.122.31.125//bl服务器地址blservport=1072//bl服务器端口#blservport=9650//bl服务器端口battledebugmsg=0//战斗debug信息ba…

    2022年10月6日
    4
  • 购物网站 mysql设计_购物网站数据库设计

    购物网站 mysql设计_购物网站数据库设计展开全部一 概述网上购物店的数据模型 主要模式有产品 product 帐户 Account 定单 e78988e69d63 Order 和产品相关的表有 category product item inventory supplier 和用户相关表有的 account signon profile 和定

    2026年3月18日
    2
  • 单页面网站的利弊

    单页面网站的利弊现在的网站 一般的网站建设公司都会选择做成多页面网站 因为多页面网站内容丰富 相比单页面网站 更容易做 SEO 优化 也能在网站外形上做多些变化 但是还是会有特殊网站要求做单页面网站 今天 惠州网站建设公司 惠州盖亚科技的小编就来说说单页面网站的利弊 让大家对此有些了解 首先 我们来看看单页面网站有什么优势呢 nbsp 第一 利于搜索引擎的抓取 单页面网站最大的优点

    2026年3月26日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号