vue--slot插槽的使用方式
- slot 插槽可以在子组件中为父组件要传递的标签占位置 能够有效的减少代码冗余 使代码更加有逼格
- 第一个例子
<body>
<div class="app">
<child> //假注释。。。 这里的span标签会替代子组件child中的slot标签 当child标签中没有任何东西的时候 会显示默认值 就是那句话
<span>hehaha</span>
</child>
</div>
</body>
<template id="tpl">
<div>
<span>haha</span>
<slot>当父组件没传值过来 就显示这个</slot>
</div>
</template>
<script>
Vue.component('child',{
template:'#tpl', })
const app = new Vue({
el:'.app'
})
</script>
- 第二个例子
<body>
<div class="app">
<child>
<div slot="reserved">reserved---保留的</div>
<div slot="ww">ww---帅气的</div>
</child>
</div>
</body>
<template id="tpl">
<div>
<!-- 原本每一个slot插槽都会显示出 child 标签包裹的所有内容 解决这个问题方式就是具名插槽 给上面每一个div 命名slot 值 然后再 slot 插槽中使用name属性绑定命名 -->
<slot name="reserved">当父组件没传值过来 就显示这个</slot>
<span>haha</span>
<slot name="ww">当父组件没传值过来 就显示这个</slot>
</div>
</template>
<script>
Vue.component('child',{
template:'#tpl', })
const app = new Vue({
el:'.app'
})代码中有解释了。。。
- 作用域插槽
- 上代码
<body>
<div class="app">
<child>
<template slot-scope="props">
<span>{{ props }}</span>
</template>
</child>
</div>
</body>
<template id="tpl">
<div>
<!-- 子组件做循环或者子组件中部分结构 需要由外部传入的时候使用作用域插槽 -->
<!-- 这里循环的每一项都给ite 然后父组件中接收??? -->
<slot v-for="item of list" :ite="item"></slot>
</div>
</template>
<script>
Vue.component('child',{
template:'#tpl',
data(){
return{
list:[1,2,3,4]
}
}
})
const app = new Vue({
el:'.app'
})
</script>
vue--slot插槽的使用方式的更多相关文章
- vue slot 插槽详解
插槽含义:就是引入子组件后,在插入子组件元素中添加信息或者标签,使得子组件的指定位置插入信息或者标签 插槽有三种:默认插槽.具名插槽.作用域插槽,由于vue2.6.0后对插槽进行修改,但是兼容2.6. ...
- Vue slot插槽
插槽用于内容分发,存在于子组件之中. 插槽作用域 父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪. 子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据. 插槽元素 &l ...
- Vue slot插槽内容分发
slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...
- Vue slot 插槽用法:自定义列表组件
Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...
- vue slot插槽的使用
slot插槽的使用场景 父组件向子组件传递dom时会用到插槽 作用域插槽:当同一个子组件想要在不同的父组件里展示不同的状态,可以使用作用域插槽.展示的状态由父组件来决定 注:想要修改父组件向子 ...
- vue slot插槽的使用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue slot插槽通俗解释
slot内容分发是Vue的Api来源 <div id="app"> <my-list> {{msg}} </my-list> </div& ...
- vue slot 插槽备忘
老是记不住插槽咋回事 记录下来备忘 父组件 <tab><template slot="boy" slot-scope="test">{{ ...
- vue slot插槽v-show不控制显示隐藏
vue中想控制插槽的显示隐藏,用v-show是不起任何作用的,改用v-if 可以生效.
- Vue.js插槽slot和作用域插槽slot-scope学习小结
一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...
随机推荐
- INFORMATICA 开发规范
目 录 Informatica开发规范.... 1 目 录.... 2 1 编写目的.... 4 2 ETL研发责任人界定.... 4 3 ETL ...
- Mysql备份 -----innobackupex
一,原理及介绍〇 xtrabackup能做哪些 对InnoDB引擎的表做热备 增量备份 流压缩传输到另外的服务器上 在线移动表 更简单的创建从库 备份时不增加服务器 ...
- 【Oracle】查看被锁的表和解锁
--以下几个为相关表SELECT * FROM v$lock;SELECT * FROM v$sqlarea;SELECT * FROM v$session;SELECT * FROM v$proce ...
- Oracle - ORA-28547: Connection to server failed,probable Oracle Net admin error (Navicat)
一.异常 用Navicat连接Oracle数据库时抛出的异常 二.方案 使用 Oracle 安装目录 \Oracle\product\11.2.0\dbhome_1\BIN 下的 oci.dll 替换 ...
- 用setTimeout实现动态时钟的效果
1.获取到系统时间 2.获取到当地时间字符串 3.开启延时器,每一秒刷新一次时间 <!DOCTYPE html> <html> <head> <meta ch ...
- namespace 相关
#include <iostream>using namespace std;namespace first{ int var = 5;}namespace second{ double ...
- windows系统镜像 微软官方资源便捷下载教程
今天跟小师弟学到了一个下载软件的好办法,省得到各种网站下载带有病毒,插件的资源. 这个神奇的网站叫做 MSDN, 我告诉你,这是一个私人维护的网站,里面有各种官方软件的下载地址.可以直接用下载工具 ...
- SQL常用
--1.创建schema create schema exp --2.把dbo下面的对象e_A,移到exp下面 alter schema exp transfer dbo.e_A --3分组字 ...
- 今天开始每天一点ffmpeg知识。千里之行 。
今天开始每天一点ffmpeg知识.千里之行 .
- html禁用缓存
<!-- 禁用缓存 --><meta http-equiv="pragma" content="no-cache"><META H ...