vue2 作用域插槽slot-scope详解
插槽分为单个插槽,具名插槽,还有作用域插槽,前两种比较简单这里就不赘述了,今天的重点是讨论作用域插槽。
简单来说,前两种插槽的内容和样式皆由父组件决定,也就是说显示什么内容和怎样显示都由父组件决定;
作用域插槽的样式由父组件决定,内容却由子组件控制。简单来说:前两种插槽不能绑定数据,作用域插槽是一个带绑定数据的插槽。
注意:在 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详解的更多相关文章
- Maven依赖中的scope详解,在eclipse里面用maven install可以编程成功,到服务器上用命令执行报VM crash错误
Maven依赖中的scope详解 项目中用了<scope>test</scope>在eclipse里面用maven install可以编译成功,到服务器上用命令执行报VM cr ...
- spring中的scope详解
spring容器中的bean默认是单例模式的,改成非单例模式需要在类上加上@Scope("prototype") 1. scope概论 spring中scope是一个非常关键的概念 ...
- Spring-bean作用域scope详解
Spring Framework支持五种作用域(其中有三种只能用在基于web的Spring ApplicationContext). singleton 在每个Spring IoC容器中一个bean定 ...
- Spring中bean的作用域scope详解
参考文献:http://blog.csdn.net/jacklearntech/article/details/40157861 http://www.cnblogs.com/qq78292959/p ...
- Spring中bean的scope详解
如何使用spring的作用域: <bean id="role" class="spring.chapter2.maryGame.Role" scope=& ...
- angular之scope详解
AngularJS的一些指令会创建子作用域,而子作用域会继承自父作用域,大致可分为以下3种 1.创建子作用域并继承父作用域的指令 ng-repeat ng-include ng-switch ng-c ...
- JS作用域,作用域,作用链详解
前言 通过本文,你大概明白作用域,作用域链是什么,毕竟这也算JS中的基本概念. 一.作用域(scope) 什么是作用域,你可以理解为你所声明变量的可用范围,我在某个范围内申明了一个变量,且这个变量 ...
- AngularJs指令配置参数scope详解
AngularJs最重要也是最难理解的模块之一就是它的指令(directive)了,自定义指令配置有很多个参数,下面我只说说其中scope的配置极其含义. scope表示指令的作用域,它有三个可选值: ...
- Spring bean - scope详解
Scope是定义Spring如何创建bean的实例的. 在创建bean的时候可以带上scope属性,scope有下面几种类型. Singleton 这也是Spring默认的scope,表示Spring ...
随机推荐
- Linux资源分析工具杂谈(长文慎入)
Linux资源分析工具杂谈 开篇之前请大家先思考一个问题: 磁盘的平均I/O响应时间是1 ms,这个指标是好,还是差? 众所周知,计算机科学是客观的,也就是说对于一个给定的问题,我们总是 ...
- 再谈HTTP2性能提升之背后原理—HTTP2历史解剖
即使千辛万苦,还是把网站升级到http2了,遇坑如<phpcms v9站http升级到https加http2遇到到坑>. 因为理论相比于 HTTP 1.x ,在同时兼容 HTTP/1.1 ...
- dom反转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- sql server导出数据,本地数据库远程连接不上,怎样设置防火墙(自用)
控制面板——>系统安全——>windows防火墙——>高级设置 新建入站规则: 将一下两个应用 允许入站: D:\Program Files (x86)\Microsoft SQL ...
- Linux替换文件内容sed命令
sed -e 4a\newline testfile //在第四行后添加一行,并将结果输出到标准输出.-e,以指定脚本处理文本文件:a,新增. nl /etc/passwd | sed '2,5d' ...
- Flask实战-留言板-使用Bootstrap-Flask简化页面编写
使用Bootstrap-Flask简化页面编写 扩展Bootstrap-Flask内置了可以快速渲染Bootstrap样式HTML组件的宏,并提供了内置的Bootstap资源,方便快速开发,使用它可以 ...
- tomcat部署项目
提示:指定jdk版本 在bin路径下的setclasspath.bat文件添加 set JAVA_HOME=C:\Program Files\Java\jdk1.8.0_201 set JRE_HO ...
- Truck Adblue Emulator For SCANIA
For sale online Truck Adblue Emulator For SCANIA See the price Where to buy? Truck Adblue Emulator F ...
- 第三方jar包上传私服和项目使用
下面只做个人日志记录,勿喜勿喷 使用两个浏览器,带着下面的问题去看:https://www.cnblogs.com/tyhj-zxp/p/7605879.html.就会清晰了 1.下载和安装nexus ...
- vuex store刷新存储状态
app.vue 平时不想把信息存到session里,只有无可奈何的时候才准备村 <script> export default { name: 'App', created() { //刷 ...