使用场景：复用子组件的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. 洛谷——P1529 回家 Bessie Come Home

    P1529 回家 Bessie Come Home 题目描述 现在是晚餐时间,而母牛们在外面分散的牧场中. 农民约翰按响了电铃,所以她们开始向谷仓走去. 你的工作是要指出哪只母牛会最先到达谷仓(在给出 ...

  2. Quartz.NET 3.0.7 + MySql 动态调度作业+动态切换版本+多作业引用同一程序集不同版本+持久化+集群(四)

    把 HAProxy 用上了,终于不用担心某个节点挂了,还要去手动修改管理后台配置文件的api地址了. 在某网站下载了一个 window 可以用的版本 haproxy-1.7.8 不得不吐槽一下,作者要 ...

  3. C++中的error C2662，const的this指针问题

    今天在写C++代码的时候遇到一个错误,涉及到了常量的this指针的问题. 简化后的代码如下: #include <iostream> #include <string> usi ...

  4. Java 对象池实现

    http://blog.csdn.net/bryantd/article/details/1100019 http://www.cnblogs.com/devinzhang/archive/2012/ ...

  5. 【斜率优化】Average

    [UVa1451]Average 算法竞赛入门经典第8章8-9 ( P243 ) 题目大意:给定一个长度为N的01串,选择一个长度至少为L的连续子串,使序列平均值最大 (N<=100001) 题 ...

  6. python3-开发进阶-RESTful 软件架构风格

    一. 什么是RESTful REST与技术无关,代表的是一种软件架构风格,REST是Representational State Transfer的简称,中文翻译为“表征状态转移” REST从资源的角 ...

  7. JDK源码学习笔记——Iterable/Iterator实现原理

    Collection接口继承java.lang.Iterable接口,集合类重写了iterator()方法 public interface Iterable<T> { Iterator& ...

  8. Codeforces Round #127 (Div. 1) C. Fragile Bridges dp

    C. Fragile Bridges 题目连接: http://codeforces.com/contest/201/problem/C Description You are playing a v ...

  9. XCode6 ,iOS之PCH文件配置

    1: 创建PCH文件 NewFile-->Other中的PCH File-->Next-->Create 2:配置PCH文件 项目中的TARGETS-->Build Setti ...

  10. arcgis andriod 点击后变色

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...