vue之插槽-slot
1.背景
2.slot简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../js/vue.js"></script>
</head>
<body>
<h2>插槽slot简单使用</h2>
<pre>
1.定义:通俗的来说就是html中的变量,你可以理解为html替换,他要实现的功能非常类型之前我们使用jquery的 $("#id").html('要替换的内容')
2.官方的定义大家自己百度
需求:
1. 定义一个组件;
2.组件内部的内容可以根据使用者替换
</pre>
<hr>
<h2>案例如下:</h2>
<div id="app">
<c-child1></c-child1>
-------------------------
<c-child1>
<div>父类替换你的值</div>
</c-child1>
</div> <!--子组件模板1-->
<template id="child1id">
<div>
我是一个子组件
<div>
<slot>这是我的默认内容,使用者可以替换</slot>
</div>
</div>
</template>
<script>
let app = new Vue({
el: '#app',
// 组件
components: {
'c-child1': {
template: '#child1id',
}
}
})
</script>
</body>
</html>
3.具名插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../js/vue.js"></script>
</head>
<body>
<h2>插槽slot-具名插槽</h2>
<pre>
1.当多个插槽时,我们替换的内容到底替换那个插槽呢,这时候我们就需要给插槽去一个名字
2.可以利用slot 元素的一个特殊的特性：name来定义具名插槽
需求:
1. 定义一个组件;
2. 组件内3个插槽,分别为网页的头部、主体、脚部
</pre>
<hr>
<h2>案例如下:</h2>
<div id="app">
<c-child1>
<div slot="header">填充头部</div>
<div slot="body">填充主体</div>
<div slot="footer">填充脚部</div>
</c-child1> </div> <!--子组件模板1-->
<template id="child1id">
<div>
<div>
<slot name="header">头部</slot>
<slot name="body">主体</slot>
<slot name="footer">脚部</slot>
</div>
</div>
</template>
<script>
let app = new Vue({
el: '#app',
// 组件
components: {
'c-child1': {
template: '#child1id',
}
}
})
</script>
</body>
</html>
4.父组件控制插槽中的数据显示方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../js/vue.js"></script>
</head>
<body>
<h2>插槽-实现子组件提供数据-父组件提供展示样式</h2>
<pre>
需求:
1. 提供一个子组件含插槽和一组数据;
2. 父组件控制数据在插槽中的显示方式;
备注:
实际生产中子组件获取到数据后,可能要在不同环境的父组件中做不同的展示
</pre>
<hr>
<h2>案例如下:</h2>
<div id="app">
展示方式一:
<c-child1>
<!-- slotProps2 可以自定义-->
<template slot-scope="slotProps2">
<ul>
<!-- slotProps2.data 取出插槽绑定在上面的data-->
<li v-for="item in slotProps2.data">{{item}}</li>
</ul>
</template>
</c-child1>
-----------------------
<br>
展示方式二:
<c-child1>
<template slot-scope="slotProps2">
<ul>
<li v-for="(item,index) in slotProps2.data">{{index+1}}-{{item}}</li>
</ul>
</template>
</c-child1>
</div> <!--子组件模板1-->
<template id="child1id">
<div>
<!-- 这里的data不乱取名字,只能是data-->
<slot :data="orderList"></slot>
</div>
</template>
<script>
let app = new Vue({
el: '#app',
// 组件
components: {
'c-child1': {
template: '#child1id',
data() {
return {
orderList: ['书籍', '水果', '键盘', '水杯']
}
}
}
}
})
</script>
</body>
</html>
完美!
vue之插槽-slot的更多相关文章
- Vue.js插槽slot和作用域插槽slot-scope学习小结
一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...
- Vue中插槽slot的使用
插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于插槽是一块模板,所 ...
- vue的插槽slot
插槽是写在子组件上,用啦留给父级添加内容的位置接口: 1. 父级里的 <template :is='子标签名'>父插入内容</template>标签,里的内容 sl ...
- vue 中的slot属性(插槽)的使用
总结如下: VUE中关于插槽的文档说明很短,语言又写的很凝练,再加上其和方法,数据,计算机等常用选项在使用频率,使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经 ...
- vue 插槽slot
本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> < ...
- vue中的slot（插槽）
vue中的插槽----slot 什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. ...
- [Vue]组件——插槽：slot（匿名插槽，具名插槽）与slot-scope（作用域插槽）
1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...
- Vue插槽 slot
1. 什么是插槽 插槽slot 是往父组件中插入额外内容,实现组件的复用,一个插槽插入到一个对应的标签中 2. 实例: 一个组件中不允许有两个匿名插槽 </head> <body&g ...
- 在vue中使用插槽 slot
插槽(slot)这个概念非常重要 插槽的使用场景1:在子组件里面显示父组件的dom <div id='root'> <child content = '<p>Dell&l ...
- vue使用插槽分发内容slot的用法
将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div&g ...
随机推荐
- 微信支付普通商户与AppID账号关联管理-授权
微信支付普通商户与AppID账号关联管理 二.名词解释 名词 释义 微信支付普通商户 公司企业.政府机关.事业单位.社会组织.个体工商户.个人卖家.小微商户.(微信支付商户接入指引) AppID 已通 ...
- Timing！！！
End or Beginning "毕业",一个令人无限憧憬的具象化名词.适逢高考结束,又有一批人将奔赴更远的地方,离开他们生活了十八年的城市,在这之中亦然有着曾经的我们.但大家把 ...
- Jenkins构建项目遇到的问题总结
4.2.1 在Windows下,Jenkins运行python项目 https://www.jianshu.com/p/f6edbaaa8a0d 4.2.2 配置不同类型的项目的操作步骤 http ...
- CLR via C# 笔记 -- 计算限制的异步操作(27)
1. 线程池基础. 创建和销毁线程是一个昂贵的操作,要耗费大量时间.太多的线程会浪费内存资源.由于操作系统必须调度可运行的线程并执行上下文切换,所以大多的线程还对性能不利.为了改善这个情况,CLR包含 ...
- opengauss Need repair修复
问题描述:opengauss集群在做切换的时候,或者增删节点的时候,很容易发生节点repair,找不到主库的情况,这种情况需要把主库使用primary角色启动,然后build重建从库,就可以恢复集群 ...
- 牛客小白月赛97 A-D题解
AAAAAAAAAAAAAAAAAAAAA -----------------------------题解------------------------------------------- 统计数 ...
- k8s实战 ---- pod 基础
如果你对k8s还不了解,可以看下前文 k8s 实战 1 ---- 初识 (https://www.cnblogs.com/jilodream/p/18245222) 什么是pod,pod在 ...
- MySQL ibdata1文件太大的解决办法
在MySQL数据库中,如果不指定innodb_file_per_table=1参数单独保存每个表的数据,MySQL的数据都会存放在ibdata1文件里,时间久了这个文件就会变的非常大. 下面是参考网上 ...
- oeasy教您玩转vim - 82 - # 函数function
函数 function 回忆 关于宏,我们回忆一下 qa 开始录制宏 q 结束录制宏 @a 应用宏 qA 追加录制宏 控制寄存器内容其实就是控制宏 宏还有一些特性 可以多文件执行宏 可以并发运行宏 ...
- oeasy教您玩转vim - 73 - # 映射map
映射map 回忆上次缩写的细节 这次了解到了:abbrivate缩写 可以定义缩写 :ab o1z oeasy 这里面还可以包括方向键.回车键之类的东西 可以定义到指定的模式 iab cab 查看 ...