首页 > 其他分享 >Vue 插槽的定义和使用

Vue 插槽的定义和使用

时间:2023-06-07 20:45:24浏览次数:37  
标签:Category slot Vue 定义 插槽 使用 组件

 

父组件中使用插槽,相当于开放了在子组件内部使用的条件

在 APP的 Vue中解析后塞到Category中,

videos 里添加上 controls 就能够播放电影了

 

子组件Category中定义, slot 中间存放默认值

 category的样式

 不具名插槽写两份,就有两个重复的展示效果

 使用时会有两个, 需要在标签内 写上slot属性

 

标签:Category,slot,Vue,定义,插槽,使用,组件
From: https://www.cnblogs.com/mrsphere/p/17464489.html

相关文章

  • VUE路由传参的实用方式
    本文讲解了VUE项目中路由之间的传值方式,涉及到的方法都是开发时常用的,希望对大家有多帮助。1.方式一:使用router-link标签 1.1params传参首先定义好路由constroutes=[{path:‘/home’,component:()=>import(‘/../views/home.vue’)},{path:......
  • vue和vuex的版本搭配
    重要是事情说三遍,vue2使用vuex3!vue3使用vuex4.!否则会出现this.$store为undefined错误!vue2使用vuex3!vue3使用vuex4.!否则会出现this.$store为undefined错误!vue2使用vuex3!vue3使用vuex4.!否则会出现this.$store为undefined错误!......
  • Shiro自定义异常无法被捕获总是抛出AuthenticationException解决方案
    问题描述配置Realm之后,发现在Realm中抛出的异常被无法捕获,最后抛出AuthenticationException异场景再现 下面是errorlog2023-06-0711:49:26.131[TID:N/A][][http-nio-9]ERRORo.s.c.sleuth.instrument.web.ExceptionLoggingFilter:54-Uncaughtexceptionthrow......
  • 使用 Dockerfile 自定义 Docker 镜像
    对于一些常用的Docker镜像,我们可以从Docker官方仓库或者国内的阿里云仓库中获取,比如mysql、redis、nginx等等。但是对于一些我们自己开发的程序,要想很方便的在Docker中部署,还是需要自己制作镜像。这里不介绍Docker常用命令的使用,网上学习资料很多,这里就直接进行演示。......
  • Vue 配置项props 使用方法
     props templatescript1 script2 ......
  • Vue 执行流程
    1.main.js项目入口文件2.App.vue创建路由,设置App的样式,由router-link链接到响应的路由地址不同版本的vue区别3.router>index.js注册APP下的二级路由到不同视图4.public>index.htmlpublic下的页面配置,public的路由是5.自定义配置文件不能更改的文件:......
  • 自定义缓存注解
    自定义Springboot缓存注解在使用redis缓存时,我们可能使用Jedis,RedisTemplate或者使用@Cacheable注解。尽管这些方法都能够实现缓存的功能,但是有时在真实的业务当中这些方法可能还不够简洁和灵活,于是我们可以自定义缓存注解来解决问题。SpringBoot中注解的格式......
  • vue封装组件并发布到Npm
    前言vue封装组件是一个很常规的操作。一个封装好的组件可以在项目的任意地方使用,甚至我们可以直接从npm仓库下载别人封装好的组件使用,入element-ui这一类的组件库。1、环境准备因为我们此次封装的是Vue组件,所以我们直接在Vue脚手架项目里面进行封装即可。(1)、初始化项目vuec......
  • vue 预览word文档、图片、pdf文件等
    <el-buttonsize="mini"type="text"icon="el-icon-edit"@click="handlePreviewFile(obj)">预览</el-button><el-dialogtitle="预览":visible.sync="......
  • vue3实现自定义指令
    创建一个empty.jsimport{nextTick}from'vue';constemptyImgUrl=newURL('@/assets/images/empty-icon.jpeg',import.meta.url).href;//在vue3中不支持require引入静态图片,这是一种引入方式另外一种是直接importconstempty={install(app,options){app......