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

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8" />
  6.         <title>Vue</title>
  7.     </head>
  8.  
  9.     <body>
  10.         <div id="app">
  11.             <my-component :books="books">
  12.                 <template slot="book" slot-scope="props">
  13.                     <li>{{props.bookName}}</li>
  14.                 </template>
  15.             </my-component>
  16.         </div>
  17.         <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
  18.         <script type="text/javascript">
  19.             Vue.component('my-component', {
  20.                 template: ` <ul> <slot name="book" v-for="book in books" :book-name="book.name"><slot> </ul>  `,
  21.                 props: {
  22.                     books: {
  23.                         type: Array,
  24.                         default: function() {
  25.                             return [];
  26.                         }
  27.                     }
  28.                 }
  29.             });
  30.             new Vue({
  31.                 el: "#app",
  32.                 data: {
  33.                     books: [{
  34.                         name: 'css'
  35.                     }, {
  36.                         name: 'js'
  37.                     }, {
  38.                         name: 'html'
  39.                     }, ]
  40.                 }
  41.             })
  42.         </script>
  43.     </body>
  44.  
  45. </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命令之useradd

    useradd [选项] LOGIN(登录名) useradd –D useradd –D [选项] 创建一个新用户或更新默认新用户信息.useradd和adduser命令相同,adduser是use ...

  2. 31、Flask实战第31天：cms后台修改密码

    cms后台修改密码界面布局 先创建cms_resetpwd.html页面,继承cms_base.html {% extends 'cms/cms_base.html' %} {% block titl ...

  3. 【BZOJ 1815】【SHOI 2006】color 有色图

    http://www.lydsy.com/JudgeOnline/problem.php?id=1815 这道题好难啊,组合数学什么根本不会啊qwq 题解详见08年的Pólya计数论文. 主要思想是只 ...

  4. 计蒜客NOIP2018模拟1

    https://www.jisuanke.com/contest/1152 T1:最失败的一道题,其实就是道水题,好几种写法,一种都没想出来. 题意转化后就是:每个数可以选a[i]和a[i]-k,最后 ...

  5. 【费用流】hdu5988 Coding Contest

    从源点向每个点连接容量为该点人数,费用为1的边, 把原图中的每条边拆成两条,一条容量为1,费用为1,另一条容量为ci-1,费用为1-pi 从每个点向汇点连接容量为该点面包数量,费用为1的边. 跑的费用 ...

  6. android 关于Make sure the plugin is properly configured问题的解决办法

    这个问题引发的原因最初的报错是: [2013-10-14 10:01:58 - XXX] The connection to adb is down, and a severe error has o ...

  7. 给lnmp一键包中的nginx安装openresty的lua扩展

    lnmp一键包(https://lnmp.org)本人在使用之后发现确实好用,能帮助我们快速搭建起lnmp.lamp和lnmpa的web生产环境,因此推荐大家可以多试试.但有的朋友可能需要使用open ...

  8. Activit（活动）实践--知晓当前活动

    实际上,我们可能用的不是自己写的项目,而是从别人那里接手过来的代码,因为你刚进公司就有一个新项目开始的概率十分低.阅读别人代码时会有一个很头疼的问题,就是当你需要在某个界面上修改一些非常简单的东西时, ...

  9. ConcurrentHashMap（Java8）源码分析

    1. 常量.成员变量 private static final int MAXIMUM_CAPACITY = 1 << 30; // 和HashMap一样 private static f ...

  10. CentOS中如何安装7ZIP

    7-zip以高压缩率著称,并且是一款免费开源的压缩软件.在常规的Linux发行版中,无法通过简单的yum命令来安装该软件.那么在CentOS中,如何安装7ZIP呢?有以下3种方法: 第一种,源码编译安 ...