作用域插槽
<div id='root'>
  <child>
    <template slot-scope='props'>
      <h1>{{props.item}}</h1>
    </template>
  </child>
</div> <script>
Vue.component('child',{
  data:function(){
    return {
      list:[1,2,3,4,5]
    }
  },
  template:`<div>
    <slot v-for='item of list' :item=item></slot>
  </div>`
})
var vm = new Vue({
   el:'#root'
})
</script>
作用域插槽必须是template开头和结尾的一个内容,slot-scope是声明要接收的子组件参数都放在哪,放在props里面
所以当子组件做循环,她的某一部分dom结构应该由外部传递进来的时候,使用作用域插槽,使用作用域插槽,子组件可以像父组件插槽传递数据

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

  1. Vue基础-匿名插槽与作用域插槽的合并和覆盖行为

    Vue 测试版本:Vue.js v2.5.13 Vue 文档: <slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容.多个插槽可以有不同的名字.具名插槽将匹配内容片段 ...

  2. Vue基础-作用域插槽-列表组件

    Vue 测试版本:Vue.js v2.5.13 Vue 官网介绍作用域插槽时, 在 2.5.0+,slot-scope 能被用在任意元素或组件中而不再局限于 <template>. 作用域 ...

  3. [Vue]组件——插槽:slot(匿名插槽,具名插槽)与slot-scope(作用域插槽)

    1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...

  4. Vue学习之--------插槽【默认插槽、具名插槽、作用域插槽】(2022/8/30)

    插槽Vue.js官网介绍:https://vuejs.org/guide/components/slots.html 会牵涉到template的用法.占位.实际不渲染到页面中 1.默认插槽: 1.1 ...

  5. vue作用域插槽的应用

    问题场景: 存在一个列表,然后当鼠标放入列表中的名称上的时候,自动弹出简介,类似这种效果, 我们当然可以使用positon relative和absolute搭配达到这样的效果,但是现在有一个奇葩的问 ...

  6. vue2 作用域插槽slot-scope详解

    插槽分为单个插槽,具名插槽,还有作用域插槽,前两种比较简单这里就不赘述了,今天的重点是讨论作用域插槽. 简单来说,前两种插槽的内容和样式皆由父组件决定,也就是说显示什么内容和怎样显示都由父组件决定: ...

  7. 细说Vue作用域插槽,匹配应用场景。

    最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+. 首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子, ...

  8. Vue.js插槽slot和作用域插槽slot-scope学习小结

    一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...

  9. Vue 组件3 作用域插槽

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

随机推荐

  1. docker(5)常用命令

    1.docker docker安装国内源 $ sudo yum-config-manager \ --add-repo \ https://mirrors.ustc.edu.cn/docker-ce/ ...

  2. vue自定义指令拖动div

    钩子函数一个指令定义对象可以提供如下几个钩子函数:bind:只掉用一次,指令第一次绑定到元素是调用,在这里可以进行一次性的初始化设置inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不 ...

  3. hive - load CSV file NULL value 加载csv文件出现结果全是空值

    这个问题的根源是,创建表的时候没有指定列分隔符还有行分隔符. 因此修改建表语句 问题依然重现,此问题苦恼了一个下午,有一次用describe tablename 发现了问题所在,原来是一直没有删除ta ...

  4. 转 Python 操作 MySQL 数据库

    #########http://www.runoob.com/python/python-mysql.html Python 标准数据库接口为 Python DB-API,Python DB-API为 ...

  5. SpringBoot初始教程之Servlet、Filter、Listener配置详解

    1.介绍 通过之前的文章来看,SpringBoot涵盖了很多配置,但是往往一些配置是采用原生的Servlet进行的,但是在SpringBoot中不需要配置web.xml的 因为有可能打包之后是一个ja ...

  6. 数据库版本管理工具flyway

    引入flyway_core  jar包 java 代码实现 public class FlywayMigration { @Resource private DataSource dataSource ...

  7. C++学习笔记:

    一 友元函数:友元函数没有this指针,不是类的成员,在外部定义无需类标识符,引用全局或者静态对象不需要类对象标识符,而访问非静态对象则需要. 二 类继承:如果不指定继承方式,默认是私有继承.但私有继 ...

  8. 11073 最热门的K个搜索串

    11073 最热门的K个搜索串时间限制:350MS 内存限制:65535K提交次数:0 通过次数:0 题型: 编程题 语言: G++;GCC;VCDescription大家都非常喜欢而习惯用baidu ...

  9. linux_api之进程控制

    本篇索引: 1.引言 2.进程标识 3.多进程 4.fork函数 5.vfork函数 6.exit函数 7.wait和waitpid函数 8.竞态 9.exec函数族 10.进程状态 11.syste ...

  10. JavaScript Date 学习心得

    1.要创建一个日期对象,使用new 操作符和Date构造函数即可: var date=new Date() 在调用Date构造函数而不传递参数的情况下,新创建的对象可以自动获得当前日期和时间.必须传入 ...