百度上已经有很多的关于slot-scope的文章，但我感觉都是那些以前没学好，又回头学的人，他们都使用了.Vue文件，我觉得有点不适合初学者，所以我就写一篇适合初学者的。

先抛例程：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件之通过插槽(slot)分发内容</title>
<script src="你的vue地址，请下载最新版的"></script>
<script>
Vue.component("test-slot",{
// 插槽允许有默认内容
template:
`<div>
<strong>Error!</strong>
<slot></slot>
</div>
`,
data:function () {
return {
name:"perry"
}
}
});
// 具名插槽
Vue.component("slot-name",{
template:
`<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot ></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>

</div>
`
});

// 作用域插槽
Vue.component("todo-list",{
inheritAttrs:false,
props:{
todos:[Array,Object]
},
template:
`<ul>
<li v-for="todo in todos" :key="todo.id" style="display: block;" >
<slot :data="todo">{{todo.text}}</slot>
</li>
</ul>
`
});

</script>

<style>
li{
list-style: none;
display: inline-block;
font-size: 25px;
}
</style>
</head>
<body>
<div id="app">
<!--1、插槽内容 slot可以接收任何内容、代码，包括组件-->
<test-slot>Something bad happened.你是谁啊，我认识你吗</test-slot>
<test-slot>
Something bad happened.
<!--允许使用变量，但该变量必须是本作用域的才会生效，这里name的值将会是"岔道口"-->
<h3>标题{{name}}</h3>
<img src="img/flower.jfif" alt="图片无法显示">

</test-slot>
<!--2、具名插槽 slo有一个特殊的属性name,可以使插槽具名-->
<slot-name>
<h3>劝学</h3>
<p>少壮不努力，老大徒伤悲</p>
<p>光阴似箭，日月如梭</p>
<template slot="header">
<ul >
<li>主页</li>
<li>关于时间</li>
<li>关于人生</li>
<li>关于未来</li>
</ul>
</template>
<p>你好啊</p>
<p slot="footer">
<p>结尾</p>
<p>粤ICP备6545646456415</p>
</p>
</slot-name>

<!--使用作用域插槽，通过slot-scope实现-->
<todo-list :todos="todos">
<template slot-scope="slotProps">
<span v-if="slotProps.data.isTrue">√</span>
{{slotProps.data.text}}
</template>
</todo-list>

<!--使用ES2015结构语法-->
<todo-list :todos="todos">
<template slot-scope="{data}">
<span v-if="data.isTrue">√</span>
{{data.text}}
</template>
</todo-list>
</div>

<script>
new Vue({
el:"#app",
data:{
name:"岔道口",
todos:[
{text:"A",id:1,isTrue:true},
{text:"B",id:2,isTrue:true},
{text:"C",id:3,isTrue:false},
{text:"D",id:4,isTrue:true},
],
// slotProps:""
}
})

</script>
</body>
</html>
       例程中也写了普通插槽和具名插槽，这个我就不说，我就说一下作用域插槽。首先从“作用域插槽“”这个名字说起，本来你父组件的模板是无法使用到子组件模板中的数据，官网中有一句特别强调的话：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。这句话其实挺难理解，举个例子就知道了，

<test-slot>

Something bad happened.

<!--允许使用变量，但该变量必须是本作用域的才会生效，这里name的值将会是"岔道口"-->

<h3>标题{{name}}</h3>

<img src="img/flower.jfif" alt="图片无法显示">

</test-slot>

这是我上面的例子，也就是说这里name必须是当前组件里的，不能是test-slot这个组件内部的数据，这是它作用域限制，name这个数据属于父组件的作用域，所以只能是父组件的数据。但是slot-scope的出现却实现了父组件调用子组件内部的数据，子组件的数据通过slot-scope属性传递到了父组件

// 作用域插槽
Vue.component("todo-list",{
inheritAttrs:false,
props:{
todos:[Array,Object]
},
template:
`<ul>
<li v-for="todo in todos" :key="todo.id" style="display: block;" >
//这里的：data=“todo”就是讲子组件todo这个数据传给了父组件
<slot :data="todo">{{todo.text}}</slot>//todo.text是默认值，父组件会把它覆盖掉
</li>
</ul>
`
});
<!--使用作用域插槽，通过slot-scope实现-->
<todo-list :todos="todos">
<template slot-scope="slotProps">
<span v-if="slotProps.data.isTrue">√</span>
{{slotProps.data.text}}
</template>
</todo-list>
使用的时候就是这样，从子组件传过来的名为data值为todo的数据将会被slot-scope接收，需要注意的是，slot-scope接收的是一个对象，这里命名为slotProps，也就是说你传过来的data将会作为slotProps的一个属性，所以需要slotProps.data才能调用到data。前面说了，data的值为todo，todo是什么呢？todo是todos遍历出来的，所以是一个对象。

new Vue({
el:"#app",
data:{
name:"岔道口",
todos:[
{text:"A",id:1,isTrue:true},
{text:"B",id:2,isTrue:true},
{text:"C",id:3,isTrue:false},
{text:"D",id:4,isTrue:true},
],
// slotProps:""
}
})；
       我们已经理解了slot-scope特性，那么他有什么运用场景呢？我们可以试想一下，别人写好了一个组件，该组件已经封装好了，但他觉得，数据的显示风格让用户自己定义，就像我们上面，我们希望列表的样式由用户定义，比如我就加了一个√号。一开始最初的数据是我们传进去的，但数据必须进过子组件处理后，写组件那个人肯定希望显示的是处理后的数据。这时候slot-scope就无比重要了。
————————————————
版权声明：本文为CSDN博主「perryhuan9」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/huangyilinnuli/article/details/81239077

Vue slot-scope的理解（适合初学者）的更多相关文章

  1. 关于JAVA面向对象基础整理以及个人的理解(适合初学者阅读)

    JAVA的基础语法等都跟C有很大的相似之处,所以这里就不多啰嗦了.直接从数组开始. 数组: 1.声明 int [] a; 在声明的过程中,并没有分配空间给数组.我们可以在声明的同时,用new来分配相应 ...

  2. [Vue @Component] Pass Props Between Components with Vue Slot Scope & renderless component

    Components with slots can expose their data by passing it into the slot and exposing the data using  ...

  3. vue自学入门-4（vue slot）

    vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...

  4. 强烈推荐visual c++ 2012入门经典适合初学者入门

    强烈推荐visual c++ 2012入门经典适合初学者入门 此书循序渐进,用其独特.易于理解的教程风格来介绍各个主题,无论是编程新手,还是经验丰富的编程人员,都很容易理解. 此书的目录基本覆盖了Wi ...

  5. Vue slot插槽内容分发

    slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...

  6. Linux内核开发进阶书籍推荐(不适合初学者)

    Linux内核开发进阶书籍推荐(不适合初学者) 很早之前就想写一篇文章总结一下Linux Kernel开发的相关资料,项目的原因,再加上家里的一些事情,一直没能找到闲暇,今天终于有些时间,希望可以完成 ...

  7. vue自学入门-7（vue style scope）

    vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...

  8. 传智博客2015年最新版iOS基础视频_最适合初学者入门

    视频介绍: 本视频是iOS学院精心录制的免费精华版iOS语言基础视频,该视频特点在于最大程度保证了知识点的完整性,按知识点进行视频录制,每个视频控制在20分钟左右,不会使学生产生疲劳,授课讲究通俗易懂 ...

  9. vue渐进式开发的理解和指令

    1.vue渐进式开发 vue是一个渐进式的框架,轻量,易于上手,为啥是渐进式那,我当时也很蒙,比如的官网是jquery写的,就可以通过script标签引入事先准备好的vue.min.js的压缩源代码或 ...

随机推荐

  1. Win10离线安装.NET Framework 3.5的方法补充（附cab格式离线安装包下载） - 转载

    MS酋长很早以前已经分享了<Win10离线安装.NET Framework 3.5的方法技巧>,同时分享了exe格式的.NET Framework 3.5离线安装包下载地址.但有部分网友反 ...

  2. 【leetcode】K-th Symbol in Grammar

    题目如下: 解题思路:直接把每行的数据计算出来肯定是不行的,因为N最大是30,那个第N行长度就是2^30次方,这显然不可取.那么就只能找规律了,我采取的是倒推法.例如假如我们要求出第四行第七个元素的值 ...

  3. LeetCode--102--二叉树的层次遍历（python）

    给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如:给定二叉树: [3,9,20,null,null,15,7], 3    / \  9 20  / \ 15 7 ...

  4. React Native 之SectionList

    接上一篇: /pages/SectionListDemo.js import React, {Fragment,Component} from 'react'; import { SafeAreaVi ...

  5. luogu P1162 填涂颜色 x

    P1162 填涂颜色 题目描述 由数字0 组成的方阵中,有一任意形状闭合圈,闭合圈由数字1构成,围圈时只走上下左右4个方向.现要求把闭合圈内的所有空间都填写成2.例如:6X6的方阵(n=6),涂色前和 ...

  6. 6.12友谊赛T4城市交通费题解

    与普通的最短路径不同的是,题目中新引入了一个计入总体的费用——城市建设费.由于城市建设费由整体的某最大值决定,导致解没有最优子结构的性质,给思维带来难度. 既然最棘手的是城市建设费,我们就对它分类讨论 ...

  7. 转载自：StringUtils的常见方法

    转载自:https://blog.csdn.net/simple_smile_sun/article/details/51819158 注:运用StringUtils需要导入相关jar文件,commo ...

  8. 从Java 调用JavaScript

    篇幅过长 下载资源链接https://www.slidestalk.com/s/java_javascript_5hl09w

  9. 分类汇总统计mysql数据库一个字段中不同的记录的总和

    方法1.用 if 语句,如下例. 方法2.用case when then else 语句,用法如同if. mysql> select sum(if(id<500,1,0)),sum(if( ...

  10. Mysql数据库密码忘记的解决办法

    密码忘记——破解密码 跳过授权方式,直接登录!! 1.以管理员身份打开cmd 2.停掉mysql服务端 C:\WINDOWS\system32>net stop mysql MySQL 服务正在 ...