<!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. 力扣—Remove Duplicates from Sorted List（删除排序链表中的重复元素）python实现

    题目描述: 中文: 给定一个排序链表,删除所有重复的元素,使得每个元素只出现一次. 示例 1: 输入: 1->1->2输出: 1->2 示例 2: 输入: 1->1->2 ...

  2. Flask-sqlalchemy-表关系

        表关系   表之间的关系存在三种:   一对一.一对多.多对多.   而SQLAlchemy中的ORM也可以模拟这三种关系.因为一对一其实在SQLAlchemy中底层是通过一对多的方式模拟的, ...

  3. jenkins连接gitlab，提示returned status code 128，附解决办法

    在项目中配置git仓库地址,报无权限 Failed to connect to repository : Command "D:\Program Files\Git\mingw64\bin\ ...

  4. json 文件打读取

    1.获取文件路径 /* * BookController.class.getClassLoader().getResource("static/json/book_nav.json" ...

  5. WebDriverAgent安装

    这次安装WebDriverAgent的过程可谓坎坷呀,最后还是大牛远程解决问题,自己的确差太远,记录一下过程吧 尽量升级Xcode到最新版,保持iPhone的版本大于9.3 终端进入目标文件夹WebD ...

  6. c++后台开发面试常见知识点总结（三）操作系统

    静态链接库和动态链接库的区别 一个进程可以通过调用waitpid函数来等待它的子进程终止或者停止 Debug和Release的区别 临界区互斥量信号量事件进程互斥与同步 进程有哪几种状态,状态转换图, ...

  7. Vue学习笔记【27】——Vue路由（设置路由）

    设置路由高亮 css:     .router-link-active, /* vue-router*/    .myactive {      color: red;      font-weigh ...

  8. 【InnoDB】缓冲池

    索引目录 INNODB的体系结构 缓冲池 缓存中页的定位: checkpoint技术 INNODB的关键特性 插入缓冲 change buffer 两次写 以下的资料总结自:官方文档和<MySQ ...

  9. bzoj 3011

    传送门: http://www.lydsy.com/JudgeOnline/problem.php?id=3011 一想到这个第一反应是树形dp,然后10^18 (' '    ) 所以我直接搞了一个 ...

  10. centos下安装java jdk１.8

    ---恢复内容开始--- mysql密码修改了,发现还没装jdk,那就一起记录下来吧.虽然网上好多,但自己想查更方便了. 查看有没有装jdk #java -version显示下面信息,不是oracle ...