最近在官方文档中看到，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>

细说Vue作用域插槽，匹配应用场景。的更多相关文章

  1. vue作用域插槽的应用

    问题场景: 存在一个列表,然后当鼠标放入列表中的名称上的时候,自动弹出简介,类似这种效果, 我们当然可以使用positon relative和absolute搭配达到这样的效果,但是现在有一个奇葩的问 ...

  2. vue 开发系列(十) VUE 作用域插槽

    使用场景 官方解释,有时让插槽内容能够访问子组件中才有的数据是很有用的.比如我们在使用ant-design-vue 的表格控件时. <a-table-column title="注释& ...

  3. Vue作用域插槽：用作循环结构的模版

    一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <todos :list=&q ...

  4. Vue作用域插槽：基本用法

    一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <user v-slot:de ...

  5. vue作用域插槽

    简而言之,作用域插槽就是让插槽内容能够访问子组件中的数据. 案例如下:有CurUser组件 <template> <span> <!-- 在slot 元素上绑定user, ...

  6. 新版vue作用域插槽的使用

    2.6开始,作用域插槽的使用有了不同的地方: 作用域插槽的个人理解就是让子组件的数据可以在父组件中使用:  也是一个数据传递的方式了: 不多说,上代码 子组件定义一个插槽,并且定义一个需要传递到父组件 ...

  7. Vue 作用域插槽

    使用场景:复用子组件的slot,又可以使slot的内容不一样. <!DOCTYPE html> <html lang="zh"> <head> ...

  8. vue中插槽的使用场景

    效果图:

  9. vue作用域插槽实践

    引言 我在练手的时候发现后端返回的数据可以通过两种方式渲染 (自己遇到的 可能你都会 哈哈哈) 后端传过来的数据函数 from django.http import JsonResponse def ...

随机推荐

  1. A - Longest k-Good Segment (尺取法)

    题目链接: https://cn.vjudge.net/contest/249801#problem/A 解题思路:尺取法,每次让尺子中包含k种不同的数,然后求最大. 代码: #include< ...

  2. B - Frogger 最短路变形('最长路'求'最短路'，'最短路'求'最长路')

    http://poj.org/problem?id=2253 题目大意: 有一只可怜没人爱的小青蛙,打算去找他的女神青蛙姐姐,但是池塘水路不能走,所以只能通过蹦跶的形式到达目的地,问你从小青蛙到青蛙姐 ...

  3. js获取当前日期时间“yyyy-MM-dd HH:MM:SS”

    获取当前的日期时间 格式“yyyy-MM-dd HH:MM:SS” 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function getNowFormatDat ...

  4. python实战===教你用微信每天给女朋友说晚安

    但凡一件事,稍微有些重复.我就考虑怎么样用程序来实现它. 这里给各位程序员朋友分享如何每天给朋友定时微信发送”晚安“,故事,新闻,等等··· ···最好运行在服务器上,这样后台挂起来更方便. 准备: ...

  5. SCons: 替代 make 和 makefile 及 javac 的极好用的c、c++、java 构建工具

    http://scons.org/ https://www.ibm.com/developerworks/cn/linux/l-cn-scons/index.html 后附:另外,WAF是一个基于sc ...

  6. C/C++杂记：深入虚表结构

    1. 虚表与“虚函数表” 在“C/C++杂记:虚函数的实现的基本原理”一文中曾提到“虚函数表”的概念,只是为了便于理解,事实是:虚函数表并不真的独立存在,它只是虚表(virtual table)中的一 ...

  7. ubuntu 下抓包

    笔记本安装了ubuntu 14.04, 利用笔记本的网卡进行抓包时,需要将网卡配置为monitor模式. (1)关闭无线网卡 sudo ifconfig wlan0 down (2)将无线网卡配置为m ...

  8. 安装ClamAV对centos系统进行病毒查杀

    安装ClamAV 1.安装epel源 yum install epel-release 在安装了EPEL源后,运行下面的命令安装ClamAV # yum install clamav-server c ...

  9. Java用四种方法实现阶乘n! (factorial)

    1. 引言 实现阶乘的方法很多,这边介绍四种方法,分别是递归,尾递归,循环和BigDecimal. 2. 代码 public class Test { public static void main( ...

  10. vue渲染时对象里面的对象的属性提示undefined，但渲染成功

    场景: 从后台请求的数据结构如下: 我的list是对象,而comment又是list里的对象,渲染成功了,却报如下错: 解决办法: 添加一个:v-if