Vue 组件化开发之插槽
插槽的作用
相信看过前一篇组件化开发后，你对组件化开发有了新的认识。
插槽是干什么的呢？它其实是配合组件一起使用的，让一个组件能够更加的灵活多变，如下图所示，你可以将组件当作一块电脑主板，将插槽当作主板上的插槽，你可以随意的更换该主板上的零件。
常见的应用场景，如淘宝的导航条：
其实他们大体框架都是一样的，只是内容不同罢了。我们就可以将这个导航条定义为一个组件，而内容不同的地方都定义为一个插槽，到了不同的场景更换不同插槽即可。
匿名插槽
使用<slot>定义插槽，当父组件模板中引用子组件时，可向该插槽插入内容，如下所示：
- 一个组件中最多只能拥有一个匿名插槽，它其实也叫默认插槽
- 每个插槽都可以有默认值
<body>
<div id="app">
<navigation>
<span>这是导航</span>
</navigation>
</div>
<template id="navigation">
<main>
<slot>没有内容时显示我</slot>
</main>
</template>
<script src="./vue.js"></script>
<script>
Vue.component("navigation", {
template: "#navigation",
})
const app = new Vue({
el: "#app",
})
</script>
</body>
具名插槽
实际开发中使用最多的还是具名插槽，给每个<slot>添加一个name属性。
在插入内容时，指定slot属性为<slot>的name属性进行一一插入即可。
如下所示，定义了三种不同的搜索框，都是用的同一个组件：
<style>
@font-face {
font-family: 'iconfont'; /* project id 1953712 */
src: url('//at.alicdn.com/t/font_1953712_uiyayrse2ul.eot');
src: url('//at.alicdn.com/t/font_1953712_uiyayrse2ul.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1953712_uiyayrse2ul.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1953712_uiyayrse2ul.woff') format('woff'),
url('//at.alicdn.com/t/font_1953712_uiyayrse2ul.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1953712_uiyayrse2ul.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont";
font-size: 16px;
font-style: normal;
}
i {
flex-grow: 2;
text-align: center;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
nav {
width: 100%;
background-color: rgba(255, 162, 109, 0.8);
padding: 10px;
margin-bottom: 20px;
}
.navigation {
display: inline-flex;
justify-content: space-around;
align-items: center;
width: 100%;
}
input {
flex-grow: 6;
border-radius: 3rem;
text-align: center;
outline: none;
}
</style>
<body>
<div id="app">
<!-- 第一个个导航条，中间用默认的input框 -->
<nav>
<navigation class="navigation">
<!-- 插入时，指定slot属性 -->
<i class="iconfont" slot="left" :style="{fontSize:'2rem'}"></i>
<i class="iconfont" slot="right" :style="{fontSize:'2rem'}"></i>
</navigation>
</nav>
<!-- 第二个导航条，不需要默认的input框，所以用div填充 -->
<nav style="background-color: aliceblue">
<navigation class="navigation">
<i class="iconfont" slot="left" :style="{fontSize:'2rem'}"></i>
<div slot="mid" style="width: 70%;text-align: center">双十一狂欢夜</div>
<i class="iconfont" slot="right" :style="{fontSize:'2rem'}"></i>
</navigation>
</nav>
<!-- 第三个导航条，不需要默认的input框，所以用div填充 -->
<nav style="background-color: #ffaad8">
<navigation class="navigation">
<i class="iconfont" slot="left" :style="{fontSize:'2rem'}"></i>
<div slot="mid" style="width: 70%;text-align: center">我的资料</div>
<i class="iconfont" slot="right" :style="{fontSize:'2rem'}"></i>
</navigation>
</nav>
</div>
<template id="navigation">
<main>
<!-- 给插槽取名 name属性-->
<slot name="left"></slot>
<slot name="mid"><input type="text" placeholder="输入你的搜索项" :style="{height:'2rem'}"></slot>
<slot name="right"></slot>
</main>
</template>
<script src="./vue.js"></script>
<script>
Vue.component("navigation", {
template: "#navigation",
})
const app = new Vue({
el: "#app",
})
</script>
</body>
编译作用域
编译作用域的意思是，在那个组件的模板中，渲染时的数据就查找那个组件。
如下所示，父组件和子组件都有一个变量show，同时子组件中拥有一个插槽，将插槽插入子组件时用了v-show指令，那么这个被插入的元素会去找子组件的show还是找父组件的show呢？
答案是父组件，因为插入插槽的元素是书写在父组件中的。
<body>
<div id="app">
<cpn>
<span slot="cpn-slot" v-show="show">引用父组件的show</span>
</cpn>
</div>
<!-- 子组件模板 -->
<template id="cpn-template">
<div>
<span v-show="show">引用子组件的show</span>
<slot name="cpn-slot"></slot>
</div>
</template>
<script src="./vue.js"></script>
<script>
var cpn = {
template: "#cpn-template",
data() {
return {
show: false,
}
}
}
const app = new Vue({
el: "#app",
data: {
show: true,
},
components: { // Vue实例内部进行注册
cpn,
},
})
</script>
</body>
作用域插槽
作用域插槽使用较少，它核心理念就是用父组件来渲染子组件。
如下代码中出现一个问题，我们如果直接进行渲染，就把代码写死了，要想改变样式那么所有引用该子组件的地方样式都会改变：
<body>
<div id="app">
<cpn :user-msg="msg"></cpn>
</div>
<!-- 子组件模板 -->
<template id="cpn-template">
<div>
<ul>
<li v-for="row in userMsg">{{row}}</li>
</ul>
</div>
</template>
<script src="./vue.js"></script>
<script>
var cpn = {
template: "#cpn-template",
props: ["userMsg",],
}
const app = new Vue({
el: "#app",
data: {
msg: {
id: 1,
name: "yunya",
age: 18,
}
},
components: {
cpn,
}
})
</script>
</body>
此时就可以使用作用域插槽，由父组件来渲染子组件。
使用作用域插槽遵循三个点：
1.必须使用DOM不识别的标签，如template进行接收子组件插槽属性
2.接收子组件插槽属性的属性是scope
3.scope是一个对象
以下是渲染结果，由父组件渲染子组件，给他加粗：
<body>
<div id="app">
<cpn :user-msg="msg">
<template slot="message" scope="v">
<ul>
<li><b>{{v.field}}</b></li>
</ul>
</template>
</cpn>
</div>
<!-- 子组件模板 -->
<template id="cpn-template">
<div>
<slot name="message" v-for="row in userMsg" :field="row"></slot>
</div>
</template>
<script src="./vue.js"></script>
<script>
var cpn = {
template: "#cpn-template",
props: ["userMsg",],
}
const app = new Vue({
el: "#app",
data: {
msg: {
id: 1,
name: "yunya",
age: 18,
}
},
components: {
cpn,
}
})
</script>
</body>
再配一张图吧，看看每次的v是长什么样子：
Vue 组件化开发之插槽的更多相关文章
- 二、vue组件化开发（轻松入门vue）
轻松入门vue系列 Vue组件化开发 五.组件化开发 1. 组件注册 组件命名规范 组件注册注意事项 全局组件注册 局部组件注册 2. Vue调试工具下载 3. 组件间数据交互 父组件向子组件传值 p ...
- Vue组件化开发
Vue的组件化 组件化是Vue的精髓,Vue就是由一个一个的组件构成的.Vue的组件化设计到的内容又非常多,当在面试时,被问到:谈一下你对Vue组件化的理解.这时候又有可能无从下手,因此在这里阐释一下 ...
- vue组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...
- day69:Vue:组件化开发&Vue-Router&Vue-client
目录 组件化开发 1.什么是组件? 2.局部组件 3.全局组件 4.父组件向子组件传值 5.子组件往父组件传值 6.平行组件传值 Vue-Router的使用 Vue自动化工具:Vue-Client 组 ...
- Vue 组件化开发
组件化开发 基本概念 在最开始的时候,已经大概的聊了聊Vue是单页面开发,用户总是在一个页面上进行操作,看到的不同内容也是由不同组件构成的. 通过用户的操作,Vue将会向用户展示某些组件,也会隐藏某些 ...
- 06Vue.js快速入门-Vue组件化开发
组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...
- Vue 组件化开发的思想体现
现实中的组件化思想化思想体现 标准(同一的标准) 分治(多人同时开发) 重用(重复利用) 组合(可以组合使用) 编程中的组件化思想 组件化规范:Web Components 我们希望尽可能多的重用代码 ...
- webpack（8）vue组件化开发的演变过程
前言 真实项目开发过程中,我们都是使用组件化的去开发vue的项目,但是组件化的思想又是如何来的呢?下面就从开始讲解演变过程 演变过程1.0 一般情况下vue都是单页面开发,所以项目中只会有一个inde ...
- vue组件化开发-vuex状态管理库
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...
随机推荐
- go 下载图片
package main import ( "net/http" "fmt" "io/ioutil" "strings" ...
- css和xpath定位补充
定位的网页的地址:https://item.jd.com/100000323510.htmlxpath绝对定位: 1 以"/"开头的是绝对定位 2 /html/body/div[1 ...
- 第一章 Linux操作系统及其历史介绍
一.什么是操作系统 1.基本含义: 简称OS 是计算机系统中必不可少的基础系统软件,是应用程序运行和用户操作必备的基础环境 操作系统就是一个人与计算机之间的中介 2.组成方式: 操作系统的组成: 计算 ...
- 在Linux上成功启动Jenkins却无法访问的问题
本鸟最近打算学习Jenkins,正准备在Linux上面鼓捣一番,,却没想被入门级别问题当头一棒 下载完jenkins.war,使用java -jar命令在8088端口开启服务:java -jar je ...
- 《Head First 设计模式》：剩下的模式
正文 一.桥接模式 1.定义 桥接模式通过将实现和抽象分离开来,放在两个不同的类层次中,从而使得它们可以独立改变. 要点: 当一个类存在两个独立变化的维度,而且都需要进行扩展时,可以将其中一个维度抽象 ...
- oneshot_tjctf_2016
简单题,容易想到先泄漏libc基址,然后jump to onegadget 从而getshell from pwn import * ''' author: lemon time: 2020-10-2 ...
- Triple的使用
public Triple<Long, Long, Double> getCarRunSummary(String did, Date startDate, Date endDate) { ...
- 关于transition中嵌套keep-alive的问题解决
需求:在使用keep-alive的同时使用transition动画效果 最开始是这样写的,但是发现报错,而且动画效果失效 <transition name="container-rig ...
- 谈谈nginx和lvs各自的优缺点以及使用
在最开始呢,咱们先说一下什么叫负载均衡,负载均衡呢,就是将一批请求,根据请求的内容,分发到不同的后端去进行相应的处理,从而提供负载分担,主备切换等功能. ...
- STM32入门系列-CMSIS标准
使用寄存器点亮开发板上LED,这种开发方式显然是不适合大众,对于STM32这样庞大的芯片,内部寄存器实在太多,如果操作的外设比较多,那么就需要花很多时间查询底层寄存器内容,而且即使程序写好,如果要换其 ...