vue 具名插槽用法
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 具名插槽用法相关推荐
- 组件间数据交互——组件插槽的作用||具名插槽用法|| 作用域插槽
组件插槽的作用 组件插槽:父组件向子组件传递内容 <!DOCTYPE html> <html lang="en"> <head><meta ...
- vue solt(插槽)用法小结
之前看vue官方文档,对slot插槽分发理解模糊,最近项目中使用了slot,便梳理总结了一下,如下为我的理解: 一般vue的slot用法有两种,一种是单独使用,一种是具名solt 1.单独使用: 如下 ...
- vue具名插槽的使用
vue的插槽自我总结 vue的匿名插槽(默认插槽) vue的具名插槽 vue的作用域插槽 vue的匿名插槽(默认插槽) 父组件 <div><myslot>我是刚刚</my ...
- Vue具名插槽的使用说明
在组件的slot标签中添加name 插入新值时在新标签内加入slot=" " 新插入的值就会替换相同name的默认值
- Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】
插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...
- Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】(2022/8/30)
插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...
- 【Vue】—解构插槽 Prop以及具名插槽的缩写
[Vue]-解构插槽 Prop以及具名插槽的缩写
- Vue默认插槽、具名插槽、作用域插槽及使用作用域插槽删除列表项
Vue默认插槽.具名插槽.作用域插槽及使用作用域插槽删除列表项 1. 默认插槽 父组件标签内写的所有内容都放在插槽中 父组件: <h1>我是父组件</h1><base-b ...
- Vue知识点总结(16)——具名插槽(超级详细)
上节我们了解了一下插槽的概念和用途,并且详细演示了一下匿名插槽的使用. 这期我们的任务是具名插槽. 从名字我们就可以看出区别,一个是匿名,一个是具名. 我们就不详细说插槽概念的东西了,直接演示具名插槽 ...
最新文章
- Ehcache配置参数详解
- 大型网站的 HTTPS 实践(1):HTTPS 协议和原理
- 仿即刻的点赞滚动放大波纹图标
- 精确分割和筛选音频从长的音频中
- MySQL入门系列:存储程序(二)之存储函数简介
- 为什么JAVA的垃圾回收机制无法避免内存泄漏
- Typecho博客支持Emoji表情功能设置
- 监视和调整Linux网络协议栈:接收数据
- 开源巨献:2017 年 Google 开源了这些超赞的项目
- ios protobuf java_iOS 集成Protobuf,转换proto文件
- cisco路由器OSPF基础配置命令
- 科技公司,请逃离一线城市
- Java 使用pio生成word
- ESP8266 - 首次使用点灯科技
- Pandas写入Excel文件如何避免覆盖已有Sheet
- 004-hive基本操作
- 阿丹学理财之房产投资
- 脑部CT检查图像检查床去除算法
- RTL8723BU WiFi—蓝牙 模块移植
- 汇编语言指令英文全称
热门文章
- js与php与mysql_PHP、MySQL和JavaScript入门经典(第6版)
- 一些Shell经典脚本
- 解决导出excel导出名字乱码
- MIUI12 安卓12刷面具root 理论适合所有小米机型和系统版本 小米10实测 小米11实测
- 一文搞懂 USB 设备端驱动框架
- Win11怎么查MAC地址?Win11电脑如何查看mac地址?
- 考拉解析公众号Android手机如何保存视频到相册
- 学生课程成绩信息实体表设计mysql_数据库综合实验--设计某高校学生选课管理系统...
- MS17-010(永恒之蓝)漏洞复现
- Excel怎么快速提取图片的主色调?