<!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. 解决error: Microsoft Visual C++ 14.0 is required 问题

    1.https://964279924.ctfile.com/fs/1445568-239446865 2.重新安装 .Net framework 更高的版本:https://support.micr ...

  2. cglib代理与jdk动态代理示例

    先看基于jdk实现的动态代理实现例子 1.先声明一个接口类 public interface UserService{ public String getName(String msg); } 2.实 ...

  3. python 中字符串中含变量方法

    1. 简单粗鲁的字符串拼接 1 name = "abc" 2 age = 25 3 info = "the name is "+name +"\nth ...

  4. 工具类Collections、Arrays(传入的是数组)

    Collections类: 1. Collections.sort(list)   //对list集合进行排序前提是 list里面存储的对象已经实现了 comparable接口 2. Collecti ...

  5. 分布式存储Ceph之PG状态详解

    https://www.jianshu.com/p/36c2d5682d87 1. PG介绍 继上次分享的<Ceph介绍及原理架构分享>,这次主要来分享Ceph中的PG各种状态详解,PG是 ...

  6. windows系统下tomcat启动startup.bat一闪而过

    遇到运行startup.bat后,一个窗口一闪而过的问题 tomcat在启动时,会读取环境变量的信息,需要一个CATALINA_HOME 与JAVA_HOME的信息,CATALINA_HOME即tom ...

  7. 10个优秀的 Web UI库/框架

    UI(User Interface)即用户界面,也称人机界面.是指用户和某些系统进行交互方法的集合,实现信息的内部形式与人类可以接受形式之间的转换.本文为WUI用户整理了10个优秀的 Web UI 库 ...

  8. Python sqlite3.ProgrammingError: You must not use 8-bit bytestrings unless you use a text_factory that can interpret 8-bit bytestrings......

    完整的错误信息如下: You must not use 8-bit bytestrings unless you use a text _factory that can interpret 8-bi ...

  9. Polysh实现多服务器批量执行shell

    安装 wget wget http://guichaz.free.fr/polysh/files/polysh-0.4.tar.gz tar -zxvf polysh-0.4.tar.gz cd po ...

  10. Python Numpy 矩阵级基本操作(2)

    1.开方与求e指数 import numpy as np from numpy.matlib import randn print "Test sqrt and exp" arr ...