一、通常情况下都是父组件传递数据给子组件进行展示的（无法改变子组件的展示方式）；而作用域插槽允许子组件通过slot向父组件传递数据，类似React中的“以函数为子组件”，由父组件决定渲染的内容（包含绑定事件，样式，HTML标签等）；我把数据给你父组件了，你爱怎么处理就怎么处理，极大的提高了灵活性。

二、示例代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />

        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0" />

        <title>Vue作用域插槽2</title>

    <script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>

    </head>

    <body>

    <div id="root">

      <my-list :books="books">

        <template slot-scope="scope" slot="book">

          <li>{{scope.book.author}}--{{scope.book.name}}</li>

        </template>

      </my-list>

    </div>

    <script>

      Vue.component('my-list',{

        props: {

            books: {

                type: Array,

                default: () => []

            }

        },

        template: `

            <ul>

                <slot v-for="item in books" name="book" :book="item"></slot>

            </ul>

        `

      })

      var app = new Vue({

        el: '#root',

        data: {

          books: [

            { id: 1, author: '李四', name: '《Vue. js 实战》' },

            { id: 2, author: '王五', name : '《 JavaScript 语言精粹》' },

            { id: 3, author: '张三', name :  '《 JavaScript 高级程序设计》' }

          ]

        }

      })

    </script>

    </body>

</html>

Vue的作用域插槽的更多相关文章

  1. Vue基础-作用域插槽-列表组件

    Vue 测试版本:Vue.js v2.5.13 Vue 官网介绍作用域插槽时, 在 2.5.0+,slot-scope 能被用在任意元素或组件中而不再局限于 <template>. 作用域 ...

  2. [译] 我最终是怎么玩转了 Vue 的作用域插槽

    原文链接:https://juejin.im/post/5c8856e6e51d456b30397f31#comment 原文地址:How I finally got my head around S ...

  3. vue作用域插槽的应用

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

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

    最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+. 首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子, ...

  5. Vue基础-匿名插槽与作用域插槽的合并和覆盖行为

    Vue 测试版本:Vue.js v2.5.13 Vue 文档: <slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容.多个插槽可以有不同的名字.具名插槽将匹配内容片段 ...

  6. [Vue]组件——插槽：slot（匿名插槽，具名插槽）与slot-scope（作用域插槽）

    1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...

  7. Vue.js插槽slot和作用域插槽slot-scope学习小结

    一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...

  8. Vue组件之作用域插槽

    写作用域插槽之前,先介绍一下Vue中的slot内容分发: 如果<child-component></child-component>标签之间没有插入那两个p标签的话,页面会显示 ...

  9. Vue.js 源码分析(二十六) 高级应用 作用域插槽 详解

    普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单 ...

随机推荐

  1. [2019HDU多校第五场][HDU 6626][C. geometric problem]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6626 题目大意:给出平面上六个点\(A,B,M,N,X,Y\)以及两条直线\(L1,L2\),要求在四 ...

  2. 在 Linux 下使用 scp 命令

    将文件或文件夹从网络上的一个主机拷贝到另一个主机当中去. here:在 Linux 下使用 scp 命令 摘要: scp 是安全拷贝协议(Secure Copy Protocol)的缩写, scp 是 ...

  3. 【题解】士兵训练-C++

    题目DescriptionN个士兵排成一队进行军事训练,每个士兵的等级用1…K范围内的数来表示,长官每隔1小时就随便说出M个等级a1,a2…am(1≤ai≤K,M个等级中允许有重复),如果这M个等级组 ...

  4. SP1716 GSS3(线段树+矩阵乘法）

    Code: #include <bits/stdc++.h> #define N 50001 #define ll long long #define lson now<<1 ...

  5. 一些特殊的矩阵快速幂 hdu5950 hdu3369 hdu 3483

    思想启发来自, 罗博士的根据递推公式构造系数矩阵用于快速幂 对于矩阵乘法和矩阵快速幂就不多重复了,网上很多博客都有讲解.主要来学习一下系数矩阵的构造 一开始,最一般的矩阵快速幂,要斐波那契数列Fn=F ...

  6. sick 激光

    sick10:TiM561-2050101https://www.sick.com/cn/zh/detection-and-ranging-solutions/2d-lidar-/tim5xx/tim ...

  7. Liunx之nginx配置

    一.nginx安装 卸载yum安装的ngjnx yum remove nginx -y 编译安装nginx步骤 编译安装nginx的步骤 1.解决软件依赖 yum install gcc patch ...

  8. try catch块的秘密

    最近有同事遇到问题: 她在4处手动抛运行异常,5处存在return语句,结果程序在2出现异常时没有抛出运行异常,导致事务不一致. 我们都知道,当程序出现异常时候并且在不采取任何措施的情况下,是会抛出异 ...

  9. AcWing：241. 楼兰图腾（树状数组逆序对）

    在完成了分配任务之后,西部314来到了楼兰古城的西部. 相传很久以前这片土地上(比楼兰古城还早)生活着两个部落,一个部落崇拜尖刀(‘V’),一个部落崇拜铁锹(‘∧’),他们分别用V和∧的形状来代表各自 ...

  10. mysql8.0.17gtid方式实现主从同步

    数据库的安装: [root@node1 8.0.17]# rpm -ivh mysql-community-common-8.0.17-1.el7.x86_64.rpm 警告:mysql-commun ...