Vue插槽 slot
2024-09-27 09:12:38
1. 什么是插槽
插槽slot 是往父组件中插入额外内容,实现组件的复用,一个插槽插入到一个对应的标签中
2. 实例:
一个组件中不允许有两个匿名插槽
</head>
<body>
<div id="root">
<child>
<div class="header" slot="header">header</div>
<div class="footer" slot="footer">footer</div>
hello <!-- 没有名字的标签默认会放置到name:default的slot中 -->
</child>
</div>
<script>
Vue.component('child',{
template: `<div>
<slot name="header"></slot> <!-- 有名插槽 -->
<div class="content">content</div>
<slot name="footer"></slot> <!-- 有名插槽 -->
<slot>如果没有hello就显示slot的内容</slot> <!-- 匿名插槽 slot中可以设置默认内容,如果传递了内容则替换掉 -->
</div>`
})
var vm = new Vue({
el: '#root'
})
</script>
</body>
3. 作用域插槽
固定写法:父组件中<template slot-scope="props"></template> //props可以自定义用来接收子组件的数据
<body>
<div id="root">
<child>
<template slot-scope="props">
<li>{{props.item2}}</li> //接收子组件的item值
</template>
</child>
</div>
<script>
Vue.component('child',{
data(){
return{
list:[1,2,3,4]
}
},
template: `<div>
<ul>
<slot v-for="item of list" :item2="item"></slot>
</ul>
</div>`
})
var vm = new Vue({
el: '#root'
})
</script>
</body>
最新文章
- springmvc+mybatis整合
- Spring学习笔记 1. 尚硅谷_佟刚_Spring_HelloWorld
- opencv8-GPU之相似性计算
- mongodb python image 图像存储读取
- java连接mysql(三)
- xcode6.3插件失效
- Genymotion——PC上也能玩部落冲突 Clash of Clans
- nginx配置负载均衡与反向代理
- 2.添加键盘钩子。向进程中注入dll
- 文成小盆友python-num14 - web 前端基础 html ,css, JavaScript
- Ubuntu设置交换空间參考教程[图]
- 永久设置mysql中文乱码问题
- 前端实现搜索历史和清空历史(angularjs+ionic)
- C#获取页面上的Html
- PHP文件缓存包含三种格式
- C++ 常用设计模式(学习笔记)
- CentOS中配置Kafka集群
- 【学习笔记】python的代码块(吐槽)
- IBM、HPUX、Solaris不同之处
- CentOS 6.3安装配置supervisor进程管理工具
热门文章
- 视觉库—OpenCV
- Ckrule业务规则管理系统简介
- Oracle 查看表占用的空间大小
- Python单元测试框架unittest使用方法讲解
- 基于VB语言对SolidWorks参数化设计的二次开发
- ubuntu 18 环境下使用 @vue-cli 3.2 新建 vue 项目
- Oracle10g使用$ORACLE_HOME/rdbms/admin/awrrpt.sql报错
- Oracle分区表分批迁移
- 插上翅膀,让Excel飞起来——xlwings(二)
- echarts固定柱子宽度(barWidth)