插槽分为单个插槽,具名插槽,还有作用域插槽,前两种比较简单这里就不赘述了,今天的重点是讨论作用域插槽。

简单来说,前两种插槽的内容和样式皆由父组件决定,也就是说显示什么内容和怎样显示都由父组件决定

作用域插槽的样式由父组件决定内容却由子组件控制。简单来说:前两种插槽不能绑定数据,作用域插槽是一个带绑定数据的插槽。

注意:在 2.5.0+,slot-scope 不再限制在 <template> 元素上使用,而可以用在插槽内的任何元素或组件上。

1.App.vue

 <template>
<div>
<child :propName="items"> <!--传值到子组件-->
<!--写法1 -->
<li
<!--作用域插槽也可以具名 绑定slot name="slotName"-->
slot="slotName"
<!--把子组件插槽看作一个对象, 赋给scopeName-->
slot-scope="scopeName">
<!-- dos="item.do" (子组件中)-->
{{scopeName.dos}}
</li>
</child> <!--写法2 es6 的解构写法 推荐!!!-->
<child :propName="items">
<li slot="slotName" slot-scope="{item}">
{{item.do}}
</li>
</child> </div>
</template>
<script>
import child from "./components/child.vue"
export default{
components:{child},
data(){
return{
items:[
{do:'play'},
{do:'eat'},
{do:'sleep'},
{do:'play'},
{do:'eat'},
{do:'sleep'}
]
}
}
}
</script>

2.child.vue

 <template>
<ul>
<slot name="slotName" <!--作用域插槽也可以具名!-->
v-for="item in items"
:dos="item.do" <!--取循环中的项作为属性 方便父组件调用!-->
></slot>
</ul>
</template>
<script>
export default{
props:['items'] <!--父级items 传过来的值!-->
}
</script>

vue2 作用域插槽slot-scope详解的更多相关文章

  1. Maven依赖中的scope详解,在eclipse里面用maven install可以编程成功,到服务器上用命令执行报VM crash错误

    Maven依赖中的scope详解 项目中用了<scope>test</scope>在eclipse里面用maven install可以编译成功,到服务器上用命令执行报VM cr ...

  2. spring中的scope详解

    spring容器中的bean默认是单例模式的,改成非单例模式需要在类上加上@Scope("prototype") 1. scope概论 spring中scope是一个非常关键的概念 ...

  3. Spring-bean作用域scope详解

    Spring Framework支持五种作用域(其中有三种只能用在基于web的Spring ApplicationContext). singleton 在每个Spring IoC容器中一个bean定 ...

  4. Spring中bean的作用域scope详解

    参考文献:http://blog.csdn.net/jacklearntech/article/details/40157861 http://www.cnblogs.com/qq78292959/p ...

  5. Spring中bean的scope详解

    如何使用spring的作用域: <bean id="role" class="spring.chapter2.maryGame.Role" scope=& ...

  6. angular之scope详解

    AngularJS的一些指令会创建子作用域,而子作用域会继承自父作用域,大致可分为以下3种 1.创建子作用域并继承父作用域的指令 ng-repeat ng-include ng-switch ng-c ...

  7. JS作用域,作用域,作用链详解

    前言   通过本文,你大概明白作用域,作用域链是什么,毕竟这也算JS中的基本概念. 一.作用域(scope) 什么是作用域,你可以理解为你所声明变量的可用范围,我在某个范围内申明了一个变量,且这个变量 ...

  8. AngularJs指令配置参数scope详解

    AngularJs最重要也是最难理解的模块之一就是它的指令(directive)了,自定义指令配置有很多个参数,下面我只说说其中scope的配置极其含义. scope表示指令的作用域,它有三个可选值: ...

  9. Spring bean - scope详解

    Scope是定义Spring如何创建bean的实例的. 在创建bean的时候可以带上scope属性,scope有下面几种类型. Singleton 这也是Spring默认的scope,表示Spring ...

随机推荐

  1. Linux资源分析工具杂谈(长文慎入)

    Linux资源分析工具杂谈 开篇之前请大家先思考一个问题:        磁盘的平均I/O响应时间是1 ms,这个指标是好,还是差? 众所周知,计算机科学是客观的,也就是说对于一个给定的问题,我们总是 ...

  2. 再谈HTTP2性能提升之背后原理—HTTP2历史解剖

    即使千辛万苦,还是把网站升级到http2了,遇坑如<phpcms v9站http升级到https加http2遇到到坑>. 因为理论相比于 HTTP 1.x ,在同时兼容 HTTP/1.1 ...

  3. dom反转

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. sql server导出数据,本地数据库远程连接不上,怎样设置防火墙(自用)

    控制面板——>系统安全——>windows防火墙——>高级设置 新建入站规则: 将一下两个应用 允许入站: D:\Program Files (x86)\Microsoft SQL ...

  5. Linux替换文件内容sed命令

    sed -e 4a\newline testfile  //在第四行后添加一行,并将结果输出到标准输出.-e,以指定脚本处理文本文件:a,新增. nl /etc/passwd | sed '2,5d' ...

  6. Flask实战-留言板-使用Bootstrap-Flask简化页面编写

    使用Bootstrap-Flask简化页面编写 扩展Bootstrap-Flask内置了可以快速渲染Bootstrap样式HTML组件的宏,并提供了内置的Bootstap资源,方便快速开发,使用它可以 ...

  7. tomcat部署项目

    提示:指定jdk版本  在bin路径下的setclasspath.bat文件添加 set JAVA_HOME=C:\Program Files\Java\jdk1.8.0_201 set JRE_HO ...

  8. Truck Adblue Emulator For SCANIA

    For sale online Truck Adblue Emulator For SCANIA See the price Where to buy? Truck Adblue Emulator F ...

  9. 第三方jar包上传私服和项目使用

    下面只做个人日志记录,勿喜勿喷 使用两个浏览器,带着下面的问题去看:https://www.cnblogs.com/tyhj-zxp/p/7605879.html.就会清晰了 1.下载和安装nexus ...

  10. vuex store刷新存储状态

    app.vue 平时不想把信息存到session里,只有无可奈何的时候才准备村 <script> export default { name: 'App', created() { //刷 ...