vue slot插槽_vue3 slot插槽

vue slot插槽_vue3 slot插槽为什么使用slotslot(插槽)在生活中很多地方都有插槽,电脑usb的插槽,插板当中的电源插槽插槽的目的是为了让我们原来的设备具备更多的扩展性比如电脑的USB我们可以插入U盘,手机,鼠标,键

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

为什么使用slot

 

slot(插槽)

  • 在生活中很多地方都有插槽,电脑usb的插槽,插板当中的电源插槽
  • 插槽的目的是为了让我们原来的设备具备更多的扩展性
  • 比如电脑的USB我们可以插入U盘,手机,鼠标,键盘等等
     

组件中的插槽

  • 组件的插槽也是为了让我们的组件更具有扩展性
  • 让使用者决定组件内部的一些内容到底展示什么
     

例子

  • 移动开发中,几乎每个页面都有导航栏
  • 导航栏我们必然封装成一个插件
  • 一旦有了这个组件,我们就可以在多个页面中复用了
     

如何封装这类组件(slot)

  • 最好的封装方式就是将共性抽取到组件中,将不同的部分暴露为插槽
  • 一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容
  • 是搜索框,是文字,是按钮,由调度者自己决定
     

插槽的案例

<div id="app">
  <cpn><button>按钮</button></cpn>
  <cpn><p>hello world</p></cpn>
  <cpn><p>666</p></cpn>
</div>
<template id="cpn">
  <div>
    <h2>我是组件</h2>
    // 插槽预留的位置,方便使用者自己填写
    <slot></slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    components: {
      "cpn": {
        template: `#cpn`,
      }
    }
  })
</script>

上述代码干了以下事情
1.定义了子组件cpn,然后在子组件中预留了一个插槽,插槽的内容由用户填写
2.父组件中使用了3次子组件,3个子组件分别给插槽填写了不同的内容

最后展示效果如下
vue slot插槽_vue3 slot插槽
 

插槽默认值

如果我们需要大量使用这个组件,而且组件预留的插槽,我们大多数都是填写的返回按钮,只有极少数填写其他的,那么这种情况就可以为插槽设置一个默认值

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <slot><button>返回</button></slot>
  </div>
</template>

我们在子组件中设置了一个默认值为返回按钮的插槽,那么父组件在使用时如果不填写任何内容,那么默认就是返回按钮
 

具名插槽

有时我们需要多个插槽。例如对于一个带有如下模板的组件:

<template id="cpn">
  <div>
    <slot name="header"><span>头部</span></slot>
    <slot name="main"><span>中间</span></slot>
    <slot name="footer"><span>页脚</span></slot>
  </div>
</template>

我们在组件中预留了3个插槽,但是这里指定了3个名字,后续父组件使用v-slot指定name属性后就能填写自己的内容,比如如下代码

<div id="app">
  <cpn>
    <template v-slot:header>
      <p>header头部</p>
    </template>
    <template v-slot:footer>
      <p>footer页脚</p>
    </template>
  </cpn>
</div>

使用了cpn组件,然后指定了插槽name属性为headerfooter的内容,指定后自己填写的内容就会替换默认的内容。
注意:这里的语法格式是固定的,必须在使用template标签上绑定v-slot:插槽的名字
 

编译作用域

通过外面传给组件的变量,在以后使用插槽的时候是不能使用的

<div id="app">
  <cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
  <p>hello</p>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      isShow: true
    },
    components: {
      "cpn": {
        template: `#cpn`,
        data(){
          return{
            isShow: false
          }
        }
      }
    }
  })
</script>

上面我们定义了子组件cpn,子组件中有属性isShow,app实例中也定义了属性isShow,最后使用子组件cpn时使用了v-show,当值为true显示,值为false不显示
问题:v-show中的isShow的值是实例中的true还是子组件中的false
答案:true,因为你使用的时候是在app实例范围内,所以isShow会去从实例中的data去查找,虽然你是在cpn子组件中绑定的,但是这里的cpn你只需要把他当做普通的标签即可,如果你想让isShow的值为false,那么你只需要在子组件的template模板中使用<p v-show="isShow">hello</p>
 

作用域插槽

默认在插槽中的代码只能使用全局Vue中的属性,如果想要使用自定义组件中的属性,那么需要在定义slot的时候使用v-bind来进行绑定。

<div id="app">
  <cpn>
    <template v-slot:default="slot">
      {{slot.data.firstName}}
    </template>
  </cpn>
</div>
<template id="cpn">
  <div>
    <slot :data="user">
      {{user.lastname}}
    </slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    components: {
      "cpn": {
        template: `#cpn`,
        data(){
          return{
            "user": {
              "firstName": "甲",
              "lastname": "壳虫"
            }
          }
        }
      }
    }
  })
</script>

上述代码做了如下几件事情
1.定义了子组件cpn,在子组件中定义了user
2.在子组件cpn的模板的插槽中绑定了属性data,且插槽的默认值为user.lastname
3.在html中使用了子组件,并使用v-slot绑定了插槽Prop对象,这样就可以通过对象名称.子组件中绑定的属性名称(slot.data),来访问子组件中的数据

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

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

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

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

(0)
blank

相关推荐

  • 四大Hybrid App移动开发平台对比

    四大Hybrid App移动开发平台对比[值得一用的Apps]四大HybridApp移动开发平台对比摘要:作为一名Web开发者来说要如何站在移动互联网的浪潮之巅呢?是选择学习原生开发,研究Java、Object-C、C#等语言,还是选择继续使用网页开发,容忍HTML5功能的局限性?就在开发者左右为难的情况下HybridApp作为一个折中的解决方案诞生了。作者:来源:ZDNetCIO与应用频道|2013年04

  • 什么是跨域?如何解决?

    什么是跨域?如何解决?一、什么是跨域?跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。例如:a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。注意:跨域限制访问,其实是浏览器的限制。理解这一点很重要!!!同源策略:是指协议,域名,端口都要相同,其中有一个不同都会产生跨域;二、跨域访问示例假设有两个网站,A网站部署在:.

  • SQL Server 监控统计阻塞脚本信息

    SQL Server 监控统计阻塞脚本信息

  • vmd安装包_VMD分子模拟软件下载

    vmd安装包_VMD分子模拟软件下载VMD分子模拟软件可到其官网进行下载。软件介绍VMD是由美国伊利诺大学开发的一款可视化分子模拟软件,相较于NAMD只能完成动力学模拟计算没有图形界面而言,VMD有图形界面,可用于分子建模、视图可视化和生物分子体系(蛋白质、核酸、脂质等)的分析。由于VMD可以读取PDB(ProteinDataBank)文件并能显示相应的结构,其应用能范围扩广到更多的分子体系上。VMD提供了非常多的渲染和着色方法…

  • Java8 stream流之分组 groupingBy 的使用

    Java8 stream流之分组 groupingBy 的使用使用stream流可以让我们的代码看上去很简洁,本文举例了按照班级分组、分组再过滤、统计分组后人数、嵌套分组、分组排序…

  • 在ubuntu中pycharm2021.12.13最新激活码-激活码分享

    (在ubuntu中pycharm2021.12.13最新激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~41MD9IQHZL-eyJsaWNlbnNlSWQiOi…

发表回复

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

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