首页 > 其他分享 >Vue插槽

Vue插槽

时间:2023-10-30 11:01:59浏览次数:26  
标签:Vue 填充 插槽 默认 占位 匿名 组件

      插槽就是子组件中的提供给父组件使用的一个占位符,用<slot></slot> 表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的<slot></slot>标签。

  • 插槽显不显示、怎样显示是由父组件来控制的,而插槽在哪里显示就由子组件来进行控制

插槽的应用场景: 在项目中有多个页面用到同一组件,但需要展示的东西是不一样的,也就是说子组件的内容是不固定的,这个时侯需要在子组件中<slot></slot> 占坑,父组件需要展示什么,就往坑里加什么。

默认(匿名)插槽

没有名字的插槽叫做默认(匿名)插槽。

Vue插槽_占位符

Vue插槽_占位符_02

具名插槽

Vue插槽_插槽_03

作用域插槽:

Vue插槽_占位符_04



















































标签:Vue,填充,插槽,默认,占位,匿名,组件
From: https://blog.51cto.com/u_15716707/8086588

相关文章

  • laravel:多图片上传(10.27.0/前端vue)
    一,相关文档https://learnku.com/docs/laravel/10.x/filesystem/14865#481e03二,前端vue代码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657......
  • laravel:单图片上传(10.27.0/前端vue)
    一,相关文档https://learnku.com/docs/laravel/10.x/filesystem/14865#481e03二,前端vue代码123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657......
  • Vuex状态管理常见的几种使用功能场景
    Vuex是一个专为Vue.js应用程序开发的状态管理模式。用于集中管理应用程序的所有组件之间共享的状态,确保状态的一致性和可预测性。使用Vuex的一般步骤如下:1:安装Vuex:使用npm或yarn安装Vuex库。npminstallvuex2:创建VuexStore:在Vue应用程序中创建一个Vuex的store实例,包含了应用程序......
  • vue的性能优化
    1、v-if和v-show却别场景使用2、computed和watch区别场景使用3、v-for循环需要添加key,并且v-for不能和v-if同时使用4、文件懒加载5、路由懒加载6、第三方插件的按需加载7、事件销毁,计时器销毁(如果有)......
  • 基于Vue2+elementUI的二手书管理系统-计算机毕业设计源码+LW文档
    摘 要本设计完成了基于Vue2+elementUI的二手书管理系统的设计与实现。现代移动化网络发展下,不同于以往的短信、邮件、收音机传递信息,网页是向用户传输信息的主要媒介之一。书籍也是向人们传递信息和知识的媒介,如今书籍印刷和出版的快速发展,以及社会文化水平的进步,越来越多的读书......
  • 初看vue3源码
    因为工作的原因又回到了vue的领域,需要加深对vue和vue生态的了解也许平时比较多人手机看别人解析怎么看vue源码的,自己动手看vue源码的还是比较少,这次我想自己动手看看首先吧代码获取到本地跑起来vue仓库地址https://github.com/vuejs/vue开发环境搭建指南https://github.com/......
  • springboot+vue2+element学生信息管理系统
    效果:  .vue<template><div><el-containerstyle="height:700px;border:1pxsolid#eee"><el-headerstyle="font-size:40px;background-color:rgb(238,241,246)">学生管理</el-header&......
  • vue sass
    1.安装:[email protected]注:①.sass-loader依赖于node-sass(1).报错:Modulebuildfailed:TypeError:this.getResolveisnotafunctionatObject.loader(path/node_modules/sass-loader/dist/index.js:52:26)2.注释:①./*......
  • Vue进阶(贰零玖):@click.stop与@click.prevent应用讲解
    一、@click.stop问题:父元素中添加了一个click事件,其下面的子元素中也添加了click事件,此时,我想点击子元素获取子元素的点击事件,但却触发的是父元素的事件:<viewclass="footer-box"@click="clickCard"> <view@click="footerClick('喜欢')"><textclass="footer-box__i......
  • vue+odoo前后端搭建
    项目所需前端用vue的element组件后端用odoo 1、为什么选用element(饿了么)源自vuevue国人开发文档完善便于自学关键是我以前接触过比react上手快一开始的路线是想直接在template里面引入vue的js在xml混写,结果总是报错,这两天一直在想办法解决报错最后没解决今晚上只......