使用场景：复用子组件的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. linux shell date 用当天时间做备份文件名

    #!/bin/bash #date  显示时间,我们可以用时间的不同做为备份文件的名字,这样以前的备份就不会被覆盖 datename=$(date +%Y%m%d-%H%M%S)           ...

  2. luogu P2485 [SDOI2011]计算器

    题目描述 你被要求设计一个计算器完成以下三项任务: 1.给定y.z.p,计算y^z mod p 的值: 2.给定y.z.p,计算满足xy ≡z(mod p)的最小非负整数x: 3.给定y.z.p,计算 ...

  3. [BZOJ4007][JLOI2015]战争调度(DP+主定理)

    第一眼DP,发现不可做,第二眼就只能$O(2^{1024})$暴搜了. 重新审视一下这个DP,f[x][i]表示在x的祖先已经全部染色之后,x的子树中共有i个参战平民的最大贡献. 设k为总结点数,对于 ...

  4. [BZOJ4836]二元运算(分治FFT)

    4836: [Lydsy1704月赛]二元运算 Time Limit: 8 Sec  Memory Limit: 128 MBSubmit: 578  Solved: 202[Submit][Stat ...

  5. hdu 5961 传递 (2016ccpc 合肥站 A题)

    传递 Time Limit: 12000/6000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submiss ...

  6. 【贪心】【线性基】bzoj2460 [BeiJing2011]元素

    题意:让你求一些数在XOR下的带权极大无关组. 带权极大无关组可以用贪心,将这些数按权值从大到小排序之后,依次检验其与之前的数是否全都线性无关.可以用线性基来搞. 可以用拟阵严格证明,不过也可以脑补一 ...

  7. 【思路】Aizu - 1367 - Rearranging a Sequence

    给你一个1~n排好的数组,每次提一个数到最前面,问你最后形成的序列. 就把他的输入顺序倒过来输出即可.没出现过的再按原序输出. #include<cstdio> using namespa ...

  8. 【AC自动机】HDU中模板题

    [HDU2222] 最纯粹的裸题,错误点详见注释. #include<iostream> #include<cstdio> #include<cstring> #i ...

  9. Problem D: 零起点学算法94——输出矩阵

    #include<stdio.h> int main() { ][]; while(scanf("%d %d",&n,&m)!=EOF) { ; ;i& ...

  10. 将json字符串转换成list<T>

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Se ...