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 ...
随机推荐
- Java对称加解密算法AES
Java对称加解密算法AES import org.apache.commons.codec.binary.Base64; import org.apache.commons.lang3.String ...
- springboot3使用validation进行参数验证
前言 今天学习了使用validation整合springboot进行字段的校验,体验下来感觉很不错,有了validation可以省下一大堆控制器里面的数据校验,例如前端发送了一个请求到我们后端,请 ...
- python 发起PUT请求，报"Method not Allowed" 和 取返回的报文的内容
发起请求的时候,默认使用的POST请求方式,导致发起请求,返回[405 Method not Allowed ],检查此更新接口的请求方式为PUT,更改请求方式为PUT PUT接口返回的内容,不能通过 ...
- 获取ImageView的触摸点所对应的UIImage的坐标
获取ImageView的触摸点所对应的UIImage的坐标 功能描述 实现前分析 注意事项 代码 求打赏 功能描述 在imageview上触摸图片,求对应UIImage的触摸点. 实现前分析 从ima ...
- 07-Python异常处理
什么是异常? Python无法正常处理程序时就会发生一个异常,这时Python就会抛出一个对象,表示这是一个错误. 必须处理异常,否则程序可能会停止运行,或者出现异常现象. 如:4/0就会抛出异常,因 ...
- RuoYi-Cloud从配置到运行
前期准备工作 若依微服务版(RuoYi-Cloud)代码下载:https://gitee.com/y_project/RuoYi-Cloud 注册中心(nacos)下载:https://www.ali ...
- 《HelloGitHub》第 99 期
兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. github.com/521xueweihan/HelloG ...
- 【进阶篇】Java 项目中对使用递归的理解分享
[进阶篇]Java 项目中对使用递归的理解分享 目录 [进阶篇]Java 项目中对使用递归的理解分享 前言 一.什么是递归 1.1基本概念 1.2优缺点 1.3与迭代的区别 二.实际案例 三.改进方案 ...
- 解锁网络无限可能：揭秘微软工程师力作——付费代理IP池深度改造与实战部署指南
基于付费代理的代理IP池 项目来源 此项目为微软某个工程师构建的代理IP池,我对此进行了改造.可以用于生产环境中的爬虫项目 阅读前建议 阅读我之前发布的爬虫基础的文章,了解代理如何获取.使用等. 分为 ...
- 【C++】使用ort推理yolov10
[C++]使用ort推理yolov10 前言:由于笔者是编导专业,想玩玩yolo模型,搜来搜去全是python,所以在学会之后写一篇文章帮助和笔者同样情况的人 环境 Windows 10 C++17 ...