细说Vue作用域插槽，匹配应用场景。

最近在官方文档中看到，vue新增了一种插槽机制，叫做作用域插槽。要求的版本是2.1.0+。

首先来说一下：顾名思义，所谓作用域插槽，主要就在作用域，需要注意的是（以下几点看不懂不要紧，配合下面的例子，你会一看就懂）：

1. 组件中的slot标签只能有有一个，而这一个slot用于替代组件调用时的多个标签。即一个slot代替一组范围的标签，即为作用域。

2. 作用域插槽的特殊在于：可在上层作用域中通过临时变量拿到组件定义时通过作用域插槽传递的数据。

3. 作用域插槽的技巧在于：可在上层作用域中通过拿到的数据选择性地渲染标签（即修改slot对应的标签范围）。

下面通过实际例子来一步一步地细说：

**拥有作用域插槽的组件定义（实际代码中组件要在根实例创建之前定义）：

        Vue.component("list-tpl", {props: ["list"],template: `<ul><li style="display:block;" v-for="(item, index) in list"><slot :item="item"></slot>   // item为向上层传递的数据，单个slot在调用时转化为作用域内的多个标签</li></ul>
           `})

*根实例代码，主要包括测试数据：

var app = new Vue({el: "#app",data: {list: [{name: "tate",age: 26,single: true,  // 是否单身stu: false     // 是否是学生},{name: "kevin",age: 23,single: true,stu: true},{name: "harden",age: 28,single: false,stu: false},{name: "Jimmy",age: 29,single: false,stu: true}]}})

*最重要的组件调用

        <list-tpl :list="list"><!-- 调用的时候 a 为临时变量，只用于获取数据 --><template slot-scope="a"><!-- 若不加任何判断，整个template中的标签都会替换为定义时的slot --><h4>{{a.item.name}}</h4><h5>{{a.item.age}}</h5><!-- 技巧就在于通过a拿到的数据选择性地渲染标签，即修改单个slot对应的作用域范围 --><span v-if="a.item.single">我是单身</span><span v-if="a.item.stu">我是学生</span><span v-if="!a.item.single">我不是单身</span><span v-if="!a.item.stu">我不是学生</span></template></list-tpl>

综上：作用于插槽主要应用在：需要在实际调用组件时选择性渲染插槽内容，而不是在定义时用js写。

*下面看一下本例子的实际效果：

*本例的全部代码如下，可自行运行查看效果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div id="app"><slot-test><template slot="top">定制top</template></slot-test><list-tpl :list="list"><!-- 调用的时候 a 为临时变量，只用于获取变量 --><template slot-scope="a"><!-- 若不加任何判断，整个template中的标签都会替换为定义时的slot --><h4>{{a.item.name}}</h4><h5>{{a.item.age}}</h5><!-- 技巧就在于通过a拿到的数据选择性地渲染标签，即修改单个slot对应的作用域范围 --><span v-if="a.item.single">我是单身</span><span v-if="a.item.stu">我是学生</span><span v-if="!a.item.single">我不是单身</span><span v-if="!a.item.stu">我不是学生</span></template></list-tpl></div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script><script>Vue.component("slot-test", {template: "<div>\<slot name='top'>\<p>默认top</p>\</slot>\<slot name='mid'>\<p>默认mid</p>\</slot>\<slot name='bottom'>\<p>默认bototm</p>\</slot>\</div>"})Vue.component("list-tpl", {props: ["list"],template: `<ul><li style="display:block;" v-for="(item, index) in list"><slot :item="item"></slot>   // item为向上层传递的数据，单个slot在调用时转化为作用域内的多个标签</li></ul>
           `})var app = new Vue({el: "#app",data: {list: [{name: "tate",age: 26,single: true,stu: false},{name: "kevin",age: 23,single: true,stu: true},{name: "harden",age: 28,single: false,stu: false},{name: "Jimmy",age: 29,single: false,stu: true}]}})</script>
</body>
</html>

转载于:https://www.cnblogs.com/pomelott/p/9537147.html

细说Vue作用域插槽，匹配应用场景。相关推荐

vue作用域插槽，你真的懂了吗？
前言在网上搜了很多关于作用域插槽的解释,感觉没有写得很具体的吧,我认为应该对组件化有很深的理解才会触及到这个问题吧,这里也分享下我自己对于slot-scope的一点理解. slot大家看看文档都懂了 ...
vue作用域插槽使用详解
今天看vue官方教程中的作用域插槽的内容,看了半天都没理解内容,只好动手码代码验证理解.动手是最能促进理解的方法,再去看原文,你会发现都是翻译惹的祸,翻译的真是有点差劲. 作用域插槽,主要是为了在父组 ...
Vue.js插槽slot和作用域插槽slot-scope学习小结
一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...
VUE——slot插槽（特别重要，尤其是作用域插槽）
文章目录求一键三连重点认识插槽插槽的使用多个插槽(具名插槽 name=''name" #name) 当图片路径较深时怎么办:使用@ 渲染作用域作用域插槽(插槽传递子组件属性) 子 ...
Vue 中的作用域插槽
作用域插槽 <div id="root"><child></child> </div> Vue.component('child', ...
六十三、Vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要）
2020/10/18 . 周日.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/18 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
Vue默认插槽、具名插槽、作用域插槽及使用作用域插槽删除列表项
Vue默认插槽.具名插槽.作用域插槽及使用作用域插槽删除列表项 1. 默认插槽父组件标签内写的所有内容都放在插槽中父组件: <h1>我是父组件</h1><base-b ...
Vue中slot的使用(具名插槽与作用域插槽)
文章目录前言一.什么是插槽二.前期准备三.具名插槽的使用 1.子组件配置slot 2.使用者App.vue配置数据 3.结果展示 4.具名插槽总结四.作用域插槽的使用 1.子组件配置slot ...
【props单个数据绑定和多个数据绑定+vue默认插槽的基本使用+具名插槽的写法（2种）+插槽作用域3】
单个数据可以不用冒号,多个数据的传输需要用冒号,例如: <template><div class="layat"><Category :listDat ...

细说Vue作用域插槽，匹配应用场景。

细说Vue作用域插槽，匹配应用场景。相关推荐

最新文章

热门文章