使用场景：复用子组件的slot，又可以使slot的内容不一样。

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <title>Vue</title>

    </head>

    <body>

        <div id="app">

            <my-component :books="books">

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

                    <li>{{props.bookName}}</li>

                </template>

            </my-component>

        </div>

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

        <script type="text/javascript">

            Vue.component('my-component', {

                template: ` <ul> <slot name="book" v-for="book in books" :book-name="book.name"><slot> </ul>  `,

                props: {

                    books: {

                        type: Array,

                        default: function() {

                            return [];

                        }

                    }

                }

            });

            new Vue({

                el: "#app",

                data: {

                    books: [{

                        name: 'css'

                    }, {

                        name: 'js'

                    }, {

                        name: 'html'

                    }, ]

                }

            })

        </script>

    </body>

</html>

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

  1. vue作用域插槽的应用

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

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

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

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

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

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

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

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

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

  6. vue作用域插槽

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

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

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

  8. vue作用域插槽实践

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

  9. Vue的作用域插槽

    一.通常情况下都是父组件传递数据给子组件进行展示的(无法改变子组件的展示方式):而作用域插槽允许子组件通过slot向父组件传递数据,类似React中的“以函数为子组件”,由父组件决定渲染的内容(包含绑 ...

随机推荐

  1. python之面向对象编程二

    类的成员 类的成员可以分为三大类:字段.方法.属性. 字段:普通字段.静态字段. 方法:普通方法.类方法.静态方法 属性:普通属性. 注:所有成员中,只有普通字段的内容保存对象中,即:根据此类创建了多 ...

  2. Linux系统运维问题收集

    [Q1]如何修改系统时间? #修改成 2016-11-23 11:10:50 A: date -s 11/23/2016 date -s 11:10:50 date -R   #查看当前时区和时间 [ ...

  3. python 字符串，数学之间的不可描述的关系

    首先说一下输入: >>> a=raw_input(" ") 1.234 >>> a '1.234' >>> 可以看到使用raw ...

  4. EasyUI学习总结(六)——EasyUI布局（转载）

    本文转载自:http://www.cnblogs.com/xdp-gacl/p/4088198.html 一.EasyUI布局介绍 easyUI布局容器包括东.西.南.北.中五个区域,其中中心面板是必 ...

  5. [BZOJ5267]特工

    一个套路题...但还是得写一下这个套路避免以后忘了 题目中的运算$f(i,j)=(i|j)\text^i$对单位二进制满足$f(0,0)=f(1,0)=f(1,1)=1,f(0,1)=0$ 先考虑求正 ...

  6. 进阶的Redis之哈希分片原理与集群实战

    前面介绍了<进阶的Redis之数据持久化RDB与AOF>和<进阶的Redis之Sentinel原理及实战>,这次来了解下Redis的集群功能,以及其中哈希分片原理. 集群分片模 ...

  7. [转]MySQL与Oracle的语法区别详细对比

    Oracle和mysql的一些简单命令对比 1) SQL> select to_char(sysdate,'yyyy-mm-dd') from dual; SQL> select to_c ...

  8. Jenkins构建Maven多模块项目时，单独编译子模块，并且不触发构建其它模块

    一.Jenkins构建Maven多模块项目时,单独编译子模块 配置: 1.Root POM指向父pom.xml 2.Goals and options指定构建模块的参数:mvn -pl jsoft-w ...

  9. bootstrap之双日历时间段选择控件示例—daterangepicker(中文汉化版)

    效果图: 参考代码: <link href="/css/daterangepicker.min.css?ver=0.6" rel="stylesheet" ...

  10. KEIL、uVision、RealView、MDK、KEIL C51之间比较

    KEIL uVision,KEIL MDK,KEIL For ARM,RealView MDK,KEIL C51,KEIL C166,KEIL C251 从接触MCS-51单片机开始,我们就知道有一个 ...