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

在这里插入图片描述

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)
blank

相关推荐

  • 高通搜网流程_搜艺贝流程

    高通搜网流程_搜艺贝流程这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML图表FLowchart流程图导出与导入导出导入https:…

  • iptable 理解

    iptable 理解这个当初我理解不了,主要是没把netfilter理解清楚。Netfilter是集成在内核中的,用来定义存储各种规则的。Iptalbe是修改这些规则的工具,修改后存在netfilter里面。数据包进入LINUX服务器时,先进入服务器的netfilter模块中进行判断处理。 Netfilter包含有三种表,三种表下共包含有五种链,链下面包含各种规则。即表包含若干链,链包含若干规则。 …

  • idea激活码在线生成【2022最新】2022.02.08

    (idea激活码在线生成)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html4KDDGND3CI-eyJsaWN…

  • javascript中判断变量是否存在的正确方式

    javascript中判断变量是否存在的正确方式

  • Spring学习总结(一)入门

    Spring学习总结(一)入门

    2021年11月30日
  • 服务器基础知识

    服务器基础知识

    2020年11月19日

发表回复

您的电子邮箱地址不会被公开。

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