使用场景：复用子组件的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. Bzoj3566/洛谷P4284 [SHOI2014]概率充电器（概率dp）

    题面 Bzoj 洛谷 题解 首先考虑从儿子来的贡献: $$ f[u]=\prod_{v \in son[u]}f[v]+(1-f[v])\times(1-dis[i]) $$ 根据容斥原理,就是儿子直 ...

  2. [BZOJ3000]Big Number(斯特林公式)

    求n!在k进制下的位数,n<=1e18 斯特林公式:$n!\approx \sqrt{2\pi n}(\frac{n}{e})^n$ 在n很大的时候有较好的精度保证. $\log_{k}n!+1 ...

  3. [Lydsy1806月赛] 超速摄像头

    题面在这里! 可以证明只要叶子两两路径满足条件即可,于是便可以贪心啦,从最外圈(叶子)开始一层一层选,选出前 k/2 层. 如果k是奇数的话,还可以多选一个不是前 k/2 层的点. #include& ...

  4. 【树形dp】The more, The Better

    [HDU1561]The more, The Better Time Limit: 6000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  5. [xsy3241]暴风士兵

    题意:一个血量为$h$的人,它会被攻击$n$次,第$i$次有$p$的概率$-1$滴血(每次的$p$不同),问每次攻击后他的血量期望,强制在线 若一个人被扣了$i$滴血的概率为$p_i$,那么记多项式$ ...

  6. [xsy1232]Magic

    题意:一个无向图,每个点有$a_i,b_i$,对任意点$i$你都可以花费$b_i$的费用将$a_i$变为$0$,最后你还要付出$\sum\limits_{i=1}^n\max\limits_{(i,j ...

  7. 【AC自动机】【状压dp】【滚动数组】hdu6086 Rikka with String

    给你m个01串,问你有多少个长度为2L的01串,满足前半段倒置取反后等于后半段,并且包含所有的m个01串. 考虑单词完全在中线前面或者后面的情况,直接将单词及其倒置取反插入AC自动机,AC自动机每个结 ...

  8. C - 壮志难酬

    #include<stdio.h> #include<stdlib.h> #include<string.h> int main() { ]= {'}; int i ...

  9. JavaScript之引用类型（Array类型）

    除了Object类型,Array是ECMAScript中最常用的类型了. 与其他语言不同的是,ECMAScript数组的每一项可以保存任何类型的数据. 而且,ECMAScript数组的大小是可以动态调 ...

  10. 阿里云ECS使用SSH连接CentOS 6.9经常断线的问题解决：OperationTimedOut

    说明:不一定有效,可以试一下. 设置: vi /etc/ssh/sshd_config #添加或修改以下配置 ClientAliveInterval #每隔多少秒给SSH客户端发送一次信号 Clien ...