一、通常情况下都是父组件传递数据给子组件进行展示的（无法改变子组件的展示方式）；而作用域插槽允许子组件通过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. 2019ICPC区域赛（银川）总结

    2019ICPC银川 作为第一次打区域赛的我,心情异常激动,加上学校给坐飞机(事实上赶飞机很痛苦). 热身赛很难受,oj上不去,写AC自动机输入没写好.. 现场赛,开场直觉倒着看,发现签到.然后看B, ...

  2. 15分钟入门Markdown

    一.标题一 标题三 标题六 # 一.标题一 ### 标题三 ###### 标题六 二.字体 1.普通字体 字体加粗 斜体 斜体加粗 删除线 1.普通字体 **字体加粗** *斜体* ***斜体加粗** ...

  3. jQuery和原生JS的对比

    原生JS的缺点: 不能添加多个入口函数(window.onload),如果添加了多个,后面的会把前面的覆盖掉 原生js的api名字太长,难以书写,不易记住 原生js有的代码冗余 原生js中的属性或者方 ...

  4. animation-timing-function

    animation-timing-function 语法: animation-timing-function:<single-animation-timing-function>[,&l ...

  5. cesium billboard跨域问题1

    群里小伙伴问道使用billboard加载图片时出现跨域问题,一般认为在服务器端设置 Access-Control-Allow-Origin: * 例如用tomcat发布图片服务,可以这样设置:http ...

  6. elasticsearch-6.4.3 集群搭建

    1.准备三台服务器,已安装好es. 2.修改服务集群配置如下 使用命令: vi elasticsearch.yml 如下: cluster.name: myes ###保证三台服务器节点集群名称相同 ...

  7. Xshell查看日志

    查询日志命令(复制后鼠标右键粘贴): tail  -1000f /mnt/logs/SMFManagement/SMFManagement_info.log

  8. Linux通过AIO进行异步读文件

    下面列出源代码: #include <stdio.h> #include <stdlib.h> #include <string.h> #include <a ...

  9. c++ for_each

    #include<iostream>#include<algorithm>#include<vector>using namespace std; int main ...

  10. Docker save and load,镜像保存

    一.起因 docker pull 时发生错误 error pulling image configuration: Get https://dseasb33srnrn.cloudfront.net/r ...