vue 插槽scope_vue2 作用域插槽slot-scope详解

最新推荐文章于 2024-09-18 12:39:14 发布

weixin_39775127

最新推荐文章于 2024-09-18 12:39:14 发布

阅读量1.2k

点赞数

文章标签： vue 插槽scope

本文链接：https://blog.csdn.net/weixin_39775127/article/details/111737225

版权

本文主要探讨Vue中的作用域插槽，这种插槽允许子组件控制内容，而父组件保留样式控制。在Vue 2.5.0+中，slot-scope已可应用于插槽内的任何元素或组件。通过示例代码解释了如何使用作用域插槽，并与其他插槽类型进行对比，展示了其绑定数据的特点。

摘要由CSDN通过智能技术生成

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

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

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

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

1.App.vue

slot="slotName"

slot-scope="scopeName">

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'}

]

}

2.child.vue

v-for="item in items"

:dos="item.do"

export default{

props:['items']

}

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

Maven依赖中的scope详解项目中用了test在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的作用域:

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 ...

随机推荐

arch框架人员、组织说明

目前ERP辅助系统集成了三大模块功能,分别是财务辅助.物理辅助.报账平台. 财务辅助模块人员在ARCH_USER 表中进行管理,通过单独的[用户映射功能]将ARCH系统用户和ERP用户进行关联,关联信 ...

微信支付开发(11) Native支付

关键字:微信公众平台微信支付 Native原生支付作者:方倍工作室原文:http://www.cnblogs.com/txw1958/p/wxpay-native.html 由于微信支付接口更新,本 ...

WinForm 加载自定义控件闪烁问题

WinForm加载多个自定义控件时,会出现很严重的闪烁问题,很卡,一块一块的加载(像打开网页时,网络很卡的那种感觉)简直没法忍受. 在网上搜索了好久,网上大部分的方法是一下4种,但是都不能有效的解决问 ...

NSScanner－备

注意:在扫描的时候,如果空格是不需要扫描的,那么将会忽略空格. 如下代码: 1 NSString *string = @"my age is d 23 34.0"; ...

c&num;通用多线程基类,以队列形式

c#通用多线程基类,以队列形式个人原创.欢迎转载.转载请注明出处.http://www.cnblogs.com/zetee/p/3487084.html 多线程这个概念大家都很熟悉,对于winfor ...

div盒子水平垂直居中的方法

这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高方案1.Transforms 变形这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义t ...

PHPStorm+PHPStudy配置XDebug

img { max-width: 100% } 上一节里面从PHPStudy+PHPStorm的配置,到最后发布,PHPStorm只是承担了编辑器和发布站点的任务,但是还没有办法像Visual Stu ...

Python基础&lowbar;列表 list

列表是Python的一种基础数据类型,可以进行的操作包括索引,切片,加,乘,检查成员列表定义: list(列表.数组) eg:stus=['lisi','jion','peter'] #下标:即角标 ...

cordova AndroidStudio3&period;0 升级报错问题

http://blog.csdn.net/z_Xiaozuo/article/details/78962701 ionic3 打包安卓项目遇到的问题,当时比较冲忙升级了下android studio ...

Crypto 模块安装

crypto模块的目的是为了提供通用的加密和哈希算法. AES是一种常用的对称加密算法,加解密都用同一个密钥.crypto模块提供了AES支持,但是需要自己封装好函数,便于使用方法一: 1,到 ht ...