<!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. The Preliminary Contest for ICPC Asia Nanjing 2019 D. Robots

    题意:给出一个DAG,一只机器人从1点出发,等概率地选择一条出边走或者停留在原点,机器人的第k次行动消耗能量是k(无论是走还是停留都算一次行动).问1到n的期望. 解法:因为行动消耗的能量跟行动次数有 ...

  2. .net 开源项目地址

    https://github.com/dotnet/corefx 这个是.net core的 开源项目地址 https://github.com/aspnet 这个下面是asp.net core 框架 ...

  3. 致第一次安装（yong）小小输入法的你

    目录 强大全开放的外挂内置输入平台 支持各种编码 方便的词库维护功能 最温情的输入法 小鹤双拼自定义 本文的题目就参考了百度贴吧「致第一次安装 RIME 的你」,因为最近使用小小输入法,感觉很好用,所 ...

  4. SQL Server数据库备份&还原

    一.备份 1.登录数据库 2.找到要还原的数据库 右键-任务-备份-添加(路径只写一个,刚开始二个总是报错)-确定 二.还原数据库 这个之间报错了二次 1.报错1:备份集中的数据库与现有数据库“XXX ...

  5. 泰坦尼克号沉没之谜，用数据还原真相——Titanic获救率分析（用pyecharts）

    泰坦尼克号获救率数据分析报告,用数据揭露真相. 一,船上乘客生存率分析报告 泰坦尼克号生存率仅有38%的,可见此次事件救援不力,救生艇严重不足,且泰坦尼克号号撞得是冰山,海水冷,没有救生艇,在水里冻死 ...

  6. 《ArcGIS Runtime SDK for .NET开发笔记》 --Hello Word

    这里我们将创建第一个用于显示地图的APP. 1.新建一个WPF程序 首先我们打开Visual Studio,选择新建项目. 选择已安装——模板——Windows桌面——WPF应用程序  2.添加Run ...

  7. HTML-参考手册: 按字母顺序排列

    ylbtech-HTML-参考手册: 按字母顺序排列 1.返回顶部 1. 按字母顺序排列 New : HTML5新标签 标签 描述 <!--...--> 定义注释 <!DOCTYPE ...

  8. 微信小程序观察者模式 observers

    const app = getApp(); const request = require('../../../utils/request.js'); Component({ options: { m ...

  9. ms13_055 metasploit

    111 def get_payload(t) 112 if t['Rop'] == :msvcrt 113 print_status("Using msvcrt ROP") 114 ...

  10. Rust <10>：宏导出、导入

    源 crate 中使用 #[macro_export] 属性标记的宏,调用者可在导入此 crate 时添加 #[macro_use] 属性使用. 没有 #[macro_export] 的宏,外部不可见 ...