作用域插槽的使用(四个作用域的区别)

什么是作用域插槽?其实就是带数据的插槽。父组件可以通过绑定数据传递给子组件,而作用域插槽可以通过子组件绑定数据传递给父组件。作用域的使用场景:既可以复用子组件的slot,又可以使slot内容不一致!代码如下:<divid=”app”><div><emp-list:emps=”empList”><templateslot=”emp”slot-scop..

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

  • 什么是作用域插槽?
    其实就是带数据的插槽
    父组件可以通过绑定数据传递给子组件,而作用域插槽可以通过子组件绑定数据传递给父组件。

  • 作用域的使用场景
    既可以复用子组件的slot,又可以使slot内容不一致!

  • 代码如下:

 <div id="app">
        <div>
            <emp-list :emps="empList">
                <!-- 
                    【 slot-scope 】:主要目的是跟 empName 相联系 
                    【 props 】:作用域插槽
                -->
                <template slot="emp" slot-scope="props">
                    <li>
                        { 
   { 
   props.empname}}
                    </li>
                </template>       
            </emp-list>
        </div>
    </div>

    <template id="empComp">
        <div>
            <h1>列表排布</h1>
            <ul>
                <!--:empName="emp.name" 】:作用域插槽的属性 -->
                <slot name="emp" v-for="emp in emps" :empName="emp.name"></slot>
            </ul>
        </div>
    </template>   

    <!-- 借助免费的CDN来引入vue.js文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        //局部注册
        var vm=new Vue({ 
   
            el:"#app",
            data:{ 
   
                empList:[{ 
   
                    name:"苹果"
                },{ 
   
                    name:"西瓜"
                },{ 
   
                    name:"芒果"
                }]
            },
            components:{ 
   
                "emp-list":{ 
   
                    props:["emps"],
                    template:"#empComp"  //作为一个id
                }
            }
        });
    </script>
  • 效果图如下:
    在这里插入图片描述
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

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

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

(0)


相关推荐

  • 计算机原理 6.5 指令周期

    计算机原理 6.5 指令周期1、指令执行一般流程不同指令功能不同,数据通路不同,执行时间不同,如何安排时序?2、指令周期基本概念时钟周期=节拍脉冲=震荡周期作用:能完成一次微操作机器周期=cpu周期含义:从主存读出一

  • 公众号菜单开发_公众平台下面菜单栏怎么设置

    公众号菜单开发_公众平台下面菜单栏怎么设置一、简介微信公众平台服务号以及之前成功申请内测资格的订阅号都具有自定义菜单的功能。开发者可利用该功能为公众账号的会话界面底部增加自定义菜单,用户点击菜单中的选项,可以调出相应的回复信息或网页链接。自定

  • 全球首款AI芯片_全球AI五强

    全球首款AI芯片_全球AI五强前言你一定听说过CPU、GPU,但是TPU、VPU、NPU、XPU…等等其他字母开头的“xPU”呢?AI概念在几年前火爆全球,科技巨头们纷纷投入AI芯片的研发,小公司也致力于提出概念靠AI浪潮融资,为了快速在AI市场上立足,也为了让市场和用户能记住自家的产品,各家在芯片命名方面都下了点功夫,既要独特,又要和公司产品契合,还要朗朗上口,也要容易让人记住。前文所提到的“xPU”的命名方式就深受各大厂商的喜爱。本文就从字母A到Z来盘点一下目前各种“xPU”命名AI芯片,以及芯片行业里的各种“xPU

    2022年10月28日
  • vs的svn插件(怎么下载vs2010安装包)

    一.SVN客户端安装首先下载SVN地址:https://tortoisesvn.net/downloads.zh.html根据版本进行选择安装直接下一步下一步默认文件夹就好了安装完成右键就会有二个多出来的菜单都是英文不是很方便二.语言转换在下载SVN的下面就有语言包可以一起下载进行语言包安装找到c盘在这个目录下找到svn选择语言文件夹把语言包复制进去进行安装,安装完成打开SVN的settings的快捷方式,在里面进行选择语言,应用确认就好。这样一个SVN的安装汉化就完成

  • 关于Android导航页开发的体会

    关于Android导航页开发的体会2019独角兽企业重金招聘Python工程师标准>>>…

  • setTimeout()和setInterval()在用法上有什么区别_setinterval返回值

    setTimeout()和setInterval()在用法上有什么区别_setinterval返回值setTimeout与setTimeinterval的使用

发表回复

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

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