VUE学习-插槽
2024-09-08 19:33:20
插槽
匿名插槽
子组件设置匿名插槽
<script type="text/x-template" id="custom-comp">
<div class="custom-comp-container">
<h2>{{title}}</h2>
<slot></slot>
</div>
</script>
父组件引入子组件
知识点：
- 父组件向子组件传参
- 具化匿名插槽
<custom-comp title="标题">
<template>
<p>第一行。。。</p>
<p>第二行。。。。</p>
</template>
</custom-comp>
具名插槽
子组件设置具名插槽
<script type="text/x-template" id="custom-comp">
<div class="custom-comp-container">
<h2>{{title}}</h2>
<slot name="warpper"></slot>
</div>
</script>
父组件引入子组件
知识点：
- 父组件向子组件传参
- 具化具名插槽
<custom-comp title="标题">
<template v-slot="wrapper">
<p>第一行。。。</p>
<p>第二行。。。。</p>
</template>
</custom-comp> <custom-comp title="标题">
<template #wrapper>
<p>第一行。。。</p>
<p>第二行。。。。</p>
</template>
</custom-comp>
子组件通过插槽向父组件传参
子组件设置具名插槽
<script type="text/x-template" id="custom-comp">
<div class="custom-comp-container">
<h2>{{title}}</h2>
<slot name="warpper" v-bind:props="props"></slot>
</div>
</script>
父组件引入子组件
知识点：
- 父组件向子组件传参
- 具化具名插槽
- 接收子组件传回来的参数: slotProps
<custom-comp title="标题">
<template v-slot:wrapper="slotProps">
<p>第一行。。。</p>
<p>第二行。。。。</p>
<p>参数： {{slotProps.props}}</p>
</template>
</custom-comp> <custom-comp title="标题">
<template #wrapper="slotProps">
<p>第一行。。。</p>
<p>第二行。。。。</p>
</template>
</custom-comp>
最新文章
- SS - DIY一个前端模板引擎.(一)
- Cnetos7下，已经能访问tomcat
- 调用webservice查询手机号码归属地信息
- cocos2dx-Lua中出现的问题
- Discuz!NT中集成Memcached分布式缓存
- 基于TCP协议的服务器（单线程）
- weblogic Connection has already been closed解决方法
- Android应用程序安装与Launcher启动机制
- windows media player 中播放pls的方法
- R与数据分析旧笔记（十七） 主成分分析
- mysql事务和锁InnoDB(转)
- install ubuntu16.04
- 02-python中列表的增删改查
- MyGod_alpha版本测试报告
- 大课深度复盘、解密研发效率之道 | 第42届MPD工作坊成都站日程公布！
- fabric 安装
- Intellij Idea上Spring Boot编译报错：Error:(3, 32) java: 程序包org.springframework.boot不存在
- Vue--axios：vue中的ajax异步请求（发送和请求数据）、vue-resource异步请求和跨域
- javascript实现可拖动DIV层
- void 0 或者 undefined