<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>Vue中的作用域插槽</title>        

     </head>

     <body>

         <div id="app">

             <child>

                 <template slot-scope="props">

                     <h2>{{props.item}}</h2>

                 </template>

             </child>

         </div>

         <!-- 开发环境版本，包含了用帮助的命令行警告 -->

         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

         <script type="text/javascript">

             Vue.component('child', {

                 data: function() {

                     return {

                         list: [1,2,3,4,5]

                     }

                 },

                 template:    `<div>

                                 <ul>

                                     <slot v-for="item of list"

                                         :item = item>

                                         {{item}}

                                     </slot>

                                 </ul>

                             </div>`

             })

             var app = new Vue({

                 el: '#app'

             })

         </script>

     </body>

 </html>

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

  1. Vue组件之作用域插槽

    写作用域插槽之前,先介绍一下Vue中的slot内容分发: 如果<child-component></child-component>标签之间没有插入那两个p标签的话,页面会显示 ...

  2. Vue学习笔记-作用域插槽

    有时候我们希望子组件的内容由父组件决定如何展示,这个时候子组件的数据父组件并不能访问到,而作用域插槽的关键之处就在于,父组件能接收来自子组件的slot传递过来的参数. <div id=" ...

  3. vue中的slot插槽

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题这里就点出来了,是显示不显示和怎样显示. 1.navigation ...

  4. Vue 组件3 作用域插槽

    作用域插槽是一种特殊类型的插槽,用作使用一个(能够传递数据到)可重用模板替换已渲染元素. 在子组件中,只需将数据传递到插槽,就像你将props传递给组件一样: <div class=" ...

  5. [译] 我最终是怎么玩转了 Vue 的作用域插槽

    原文链接:https://juejin.im/post/5c8856e6e51d456b30397f31#comment 原文地址:How I finally got my head around S ...

  6. vue中的插槽（slot）

    vue中的插槽,指的是子组件中提供给父组件使用的一个占位符,用<slot></slot>标签表示,父组件可以在这个占位符中填充任何模板代码,比如HTML.组件等,填充的内容会替 ...

  7. vue中具名插槽的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue中v-slot使用

    vue中v-slot使用 1,v-slot的使用步骤 <!-- slot.vue--> <!-- 通过name属性指定具名插槽,没有name属性的为默认插槽--> <sl ...

  9. vue中插槽作用域的使用

    一.插槽作用域 1.简单来说就是带参数的插槽: 2.使用方式: 在组件标签内部加一个template标签 在template标签上加一个属性scope 值随意书写 在组件内部用slot进行接受,如果给 ...

随机推荐

  1. noip2010机器翻译

    以下题面摘自洛谷1540 题目背景 小晨的电脑上安装了一个机器翻译软件,他经常用这个软件来翻译英语文章. 题目描述 这个翻译软件的原理很简单,它只是从头到尾,依次将每个英文单词用对应的中文含义来替换. ...

  2. GOOSE报文解析

    GOOSE报文解析 变电站 使用 MMS报文 http://www.360doc.com/content/16/1014/20/36538220_598459873.shtml

  3. 绘图matplotlib

    前言 matplotlib是python的一个绘图库,如果你没有绘制过图,可以先试试js的绘图库http://www.runoob.com/highcharts/highcharts-line-lab ...

  4. 四、yml文件的写法

    1.创建一个新的工程 注意:只有properties文件,没有包含yaml文件 2.创建一个yml文件 全局配置配置文件,文件名是固定的application 作用:修改SpringBoot自动配置的 ...

  5. GitHub区域和工作流程

    workspace:工作区 index:暂存区 repository:本地版本库 remote:远程仓库 首先到托管服务器上创建一个空版本库,例如在github.coding.oschina等 然后克 ...

  6. Linux中的系统服务_02

    Linux中的系统服务_02 1. 在linux增加服务后,如果要实现随着操作系统的启动而启动,需要是用chkconfig命令,加入到系统服务中. 但是对于的脚本的表头,需要增加如下内容 #!/bin ...

  7. SQL语句计算经纬度距离

    二: SQL语句计算经纬度距离 SELECT id, ( 6371* acos( cos( radians(37) ) * cos( radians( lat ) ) * cos( radians( ...

  8. 【JS】JS以及CSS对页面的阻塞

    一.JS阻塞 所有的浏览器在下载JS文件的时候,会阻塞页面上的其他活动,包括其他资源的下载以及页面内容的呈现等等,只有当JS下载.解析.执行完,才会进行后面的 操作.在现代的浏览器中CSS资源和图片i ...

  9. 牛客挑战赛33 F 淳平的形态形成场（无向图计数，EGF，多项式求逆）

    传送门: 淳平的形态形成场 题解: 把a排序后,直接统计答案恰好为a[i]并不好做,可以统计答案>a[i]的方案数,设为\(f[i]\). 即不存在一个联通块,所有的权值都<=a[i]. ...

  10. cooike和session到底是个啥

    1.为什么需要cookie ?  cookie不属于http协议范围,由于http协议无法保持状态,即无状态属性.但实际情况,我们却又需要“保持状态”,因此cookie就是在这样一个场景下诞生. co ...