一、通常情况下都是父组件传递数据给子组件进行展示的（无法改变子组件的展示方式）；而作用域插槽允许子组件通过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. C# 通过浏览器打开指定url

    using System.Diagnostics; var resultsg = Process.Start(@"C:\Users\Administrator\AppData\Local\S ...

  2. Codeforces Round #539 (Div. 1) C. Sasha and a Patient Friend 动态开点线段树

    题解看这里 liouzhou_101的博客园 更简洁的代码看这里: #include <bits/stdc++.h> using namespace std; typedef long l ...

  3. docker起容器配置MySQL主从复制

    https://www.jianshu.com/p/0439206e1f28

  4. JUC-12.4-execute和sumbit的区别

    在Executor接口中只定义了execute方法,而submit方法则是在ExecutorService接口中定义的. execute没有返回值,而submit有返回值. 转自: https://w ...

  5. 用pyinstaller打包python程序、打包pyqt程序

    将.py脚本拷贝到一个文件夹中: 然后shift+右键,打开Powershell窗口: -F:设置打包为一个.exe文件.(缺点打开速度慢,不加-F则不打包为一个.exe,优点简洁方便) -w:设置不 ...

  6. mousemove([[data],fn])

    mousemove([[data],fn]) 概述 当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件.大理石构件来图加工 mousemove事件处理函数会被传递一个变量——事件对象, ...

  7. 003_linuxC++之_namespace使用

    (一)引入namespace原因: 假如有很多跟人共同完成一项工程,工程中难免会有函数定义一样的名称,不可能一个一个的询问这个函数 你定义过了没有,所以引入namespace #include < ...

  8. 添加tag

    创建tag git tag -a V1 -m 'release 1' 创建了本地一个版本v1,同时添加注释 release 1 查看tag git tag 显示注释 git show V1 本地tag ...

  9. Apache 下载+安装

    1.官网下载Apache 官网地址:https://httpd.apache.org/ 点击Download 上面那段话,大致意思:很高兴Apache服务器2.4.18版本的发布.在2.4.x的分支的 ...

  10. 【AGC030F】Permutation and Minimum（DP）

    题目链接 题解 首先可以想到分组后,去掉两边都填了数的组. 然后就会剩下\((-1,-1)\)和\((-1,x)\)或\((x,-1)\)这两种情况 因为是最小值序列的情况数,我们可以考虑从大到小填数 ...