<!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. Codeforces 364E 分治

    题意:给你一个01矩阵,问此矩阵有多少个和恰好为k的子矩形. 思路:分治,对于当前矩形,用一条中线把矩形分成两半,分治之后计算跨过中线的矩形个数.更具体的来说(假设划了一条水平中线),我们枚举矩形左右 ...

  2. zabbix自带database monitor

    1. 在zabbix服务器上安装一下两个包: # yum -y install unixODBC mysql-connector-odbc 2. 修改zabbix服务器上ODBC配置: 2.1 Vim ...

  3. SQL的子查询与JOIN的小试牛刀

    //学生表CREATE TABLE student( ID INT PRIMARY KEY, s_name ) NOT NULL, class_id INT NOT NULL); , "qf ...

  4. python中二维数组的建立，输入和输出

    ''' for循环: for i in range(x,y,dir): pass 首先这个区间是左闭右开 其次dir在省略的情况下默认为1,就是每次加一,也可以指定 python的数组: python ...

  5. vue+cesiumjs环境搭建【import引入】

    之前写了一遍博客关于vue+cesium的搭建,后面是在index.html里通过script引入的,但是后面要用到指南针的时候发现指南针没法引入了 之前的链接:  https://www.cnblo ...

  6. sparksql笔记

    1.sparksql是Spark用来处理结构化数据的一个模块,它提供了两个抽象DataFrame和DataSet并且作为分布式SQL查询引擎的作用. Hive SQL转换成MapReduce然后提交到 ...

  7. POJ 2387 Til the Cows Come Home （dijkstra模板题）

    Description Bessie is out in the field and wants to get back to the barn to get as much sleep as pos ...

  8. VS2013 MFC基于对话框编程

    前言一直利用Qt库做Ui设计,但针对于一些MFC项目,掌握一些必要的MFC开发技巧还是很有必要的.这篇博客里就将自己所学的一些MFC浅显知识记录一下,方便今后的学习.博客里只记录关键步骤. 一.新建M ...

  9. LOJ 2554 「CTSC2018」青蕈领主——结论（思路）+分治FFT

    题目:https://loj.ac/problem/2554 一个“连续”的区间必然是一个排列.所有 r 不同的.len 最长的“连续”区间只有包含.相离,不会相交,不然整个是一个“连续”区间. 只有 ...

  10. 「SCOI2016」背单词

    「SCOI2016」背单词 Lweb 面对如山的英语单词,陷入了深深的沉思,「我怎么样才能快点学完,然后去玩三国杀呢?」.这时候睿智的凤老师从远处飘来,他送给了 Lweb 一本计划册和一大缸泡椒,然后 ...