vue 具名插槽用法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>具名插槽</title>
</head><body><div id="app"><div class="father"><h3>这里是父组件</h3><child><!-- <span slot="demo1">001</span> --><span>菜单2</span><!-- <span slot="demo3">002</span> --><template v-slot:demo3><span>我的插槽</span></template><!-- 父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中 --></child></div></div><!-- 注意:1.  父级的填充内容如果指定到子组件的没有对应名字插槽,那么该内容不会被填充到默认插槽中。2.  如果子组件没有默认插槽,而父级的填充内容指定到默认插槽中,那么该内容就“不会”填充到子组件的任何一个插槽中。3.  如果子组件有多个默认插槽,而父组件所有指定到默认插槽的填充内容,将“会” “全都”填充到子组件的每个默认插槽中。 --><template id="child"><div class="child"><h3>这里是子组件</h3><slot></slot><slot name="demo3"><slot></div></template><!-- 具名插槽其实就是在父组件中添加一个 slot='自定义名字' 的属性,
然后在子组件中的 <slot><slot> 里面添加 name='自定义名字' 即可
如果父组件中有一部分没有添加 slot 属性,则此处就是默认的插槽,
在子组件中的 <slot></slot> 直接就是使用的父组件的默认插槽部分--><script src="js/vue.js"></script><script>let vm = new Vue({el: '#app',data: {},components: {child: {template: '#child'}}});</script>
</body></html>

vue 具名插槽用法相关推荐

  1. 组件间数据交互——组件插槽的作用||具名插槽用法|| 作用域插槽

    组件插槽的作用 组件插槽:父组件向子组件传递内容 <!DOCTYPE html> <html lang="en"> <head><meta ...

  2. vue solt(插槽)用法小结

    之前看vue官方文档,对slot插槽分发理解模糊,最近项目中使用了slot,便梳理总结了一下,如下为我的理解: 一般vue的slot用法有两种,一种是单独使用,一种是具名solt 1.单独使用: 如下 ...

  3. vue具名插槽的使用

    vue的插槽自我总结 vue的匿名插槽(默认插槽) vue的具名插槽 vue的作用域插槽 vue的匿名插槽(默认插槽) 父组件 <div><myslot>我是刚刚</my ...

  4. Vue具名插槽的使用说明

    在组件的slot标签中添加name 插入新值时在新标签内加入slot=" " 新插入的值就会替换相同name的默认值

  5. Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】

    插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...

  6. Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】(2022/8/30)

    插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...

  7. 【Vue】—解构插槽 Prop以及具名插槽的缩写

    [Vue]-解构插槽 Prop以及具名插槽的缩写

  8. Vue默认插槽、具名插槽、作用域插槽及使用作用域插槽删除列表项

    Vue默认插槽.具名插槽.作用域插槽及使用作用域插槽删除列表项 1. 默认插槽 父组件标签内写的所有内容都放在插槽中 父组件: <h1>我是父组件</h1><base-b ...

  9. Vue知识点总结(16)——具名插槽(超级详细)

    上节我们了解了一下插槽的概念和用途,并且详细演示了一下匿名插槽的使用. 这期我们的任务是具名插槽. 从名字我们就可以看出区别,一个是匿名,一个是具名. 我们就不详细说插槽概念的东西了,直接演示具名插槽 ...

最新文章

  1. Ehcache配置参数详解
  2. 大型网站的 HTTPS 实践(1):HTTPS 协议和原理
  3. 仿即刻的点赞滚动放大波纹图标
  4. 精确分割和筛选音频从长的音频中
  5. MySQL入门系列:存储程序(二)之存储函数简介
  6. 为什么JAVA的垃圾回收机制无法避免内存泄漏
  7. Typecho博客支持Emoji表情功能设置
  8. 监视和调整Linux网络协议栈:接收数据
  9. 开源巨献:2017 年 Google 开源了这些超赞的项目
  10. ios protobuf java_iOS 集成Protobuf,转换proto文件
  11. cisco路由器OSPF基础配置命令
  12. 科技公司,请逃离一线城市
  13. Java 使用pio生成word
  14. ESP8266 - 首次使用点灯科技
  15. Pandas写入Excel文件如何避免覆盖已有Sheet
  16. 004-hive基本操作
  17. 阿丹学理财之房产投资
  18. 脑部CT检查图像检查床去除算法
  19. RTL8723BU WiFi—蓝牙 模块移植
  20. 汇编语言指令英文全称

热门文章

  1. js与php与mysql_PHP、MySQL和JavaScript入门经典(第6版)
  2. 一些Shell经典脚本
  3. 解决导出excel导出名字乱码
  4. MIUI12 安卓12刷面具root 理论适合所有小米机型和系统版本 小米10实测 小米11实测
  5. 一文搞懂 USB 设备端驱动框架
  6. Win11怎么查MAC地址?Win11电脑如何查看mac地址?
  7. 考拉解析公众号Android手机如何保存视频到相册
  8. 学生课程成绩信息实体表设计mysql_数据库综合实验--设计某高校学生选课管理系统...
  9. MS17-010(永恒之蓝)漏洞复现
  10. Excel怎么快速提取图片的主色调?