Vue slot-scope的理解（适合初学者）

鉴于还是有不少的同学搜到这篇文章，而这篇文章又是笔者早期写的，现在回过头来看发现有太多的不足，为避免误人子弟，重新撰写了一篇Vue slot 详解，有需要的同学可以去浏览一下。

百度上已经有很多的关于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.

</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就无比重要了。

Vue slot-scope的理解（适合初学者）相关推荐

vue slot scope使用_20、slot插槽的用法
重点: 单个插槽.具名插槽.作用域插槽的用法: 访问插槽的方法. 其实本小白对插槽理解的还不深,哪些场景会经常用到插槽也不了解. 但是本着"大胆猜测"的理念,我的猜测如下: 假设有 ...
Vue.js入门教程（适合初学者）
Vue.js入门教程 Vue官网网址:Vue.js 中文网 Vue.js Vue.js是渐进式JavaScript 框架,是一套构建用户界面的渐进式框架.也可以说Vue.js 是一个用来构建网页界面的 ...
【前端知识之Vue】对插槽（slot）的理解
前言本系列主要整理前端面试中需要掌握的知识点.本节介绍对插槽(slot)的理解. 文章目录前言一.插槽(slot)是什么二.使用场景三.slot的分类默认插槽具名插槽作用域插槽四.面 ...
深入理解vue slot插槽
单个插槽只使用这个标签的话,可以将父组件放在子组件的内容,放到想让他显示的地方具名插槽将放在子组件里的不同html标签放在不同的位置父组件在要分发的标签里添加 slot='name' 属性子 ...
适合初学者的数据结构_数据结构101：图-初学者的直观介绍
适合初学者的数据结构了解您每天使用的数据结构 (Get to know the data structures that you use every day) Welcome! Let's Star ...
自学python的书籍逐级推荐-适合初学者和经验的十大最佳Python书籍-2018
1,最佳Python书籍清单在这篇文章中,我收集了一些适合初学者和经验丰富的最佳Python书籍的信息.我们还提到了每本书的简要介绍.这将帮助您根据您的要求选择最好的python书籍.此外,它还涵盖 ...
python比c语言好学吗-python和c语言哪个更适合初学者
C语言是编译型语言,经过编译后,生成机器码,然后再运行,执行速度快,不能跨平台,一般用于操作系统,驱动等底层开发. Python是编译型还是解释型这个界限并不明显,但大致上可以理解为解释型语言,执行速 ...
Github开源！适合初学者的机器学习和深度学习的资料合集
最近逛 GitHub,发现了一个非常不错的 AI 资料,兼顾理论和实战,非常不错! 首先放上该资源的 GitHub 地址: https://github.com/ben1234560/AiLearni ...
有什么好的Java自学教程视频，适合初学者
动力节点Java培训最新上线Java实验班,等你来测试自己适不适合学习Java编程哦! 随着互联网的发展,视频教程充斥着网络,很多人为了能够在视频教程中捞取一桶金,纷纷投入视频售卖的大军之中,其中不乏 ...

Vue slot-scope的理解（适合初学者）

Vue slot-scope的理解（适合初学者）相关推荐

最新文章

热门文章