文档章节

作用域slot

 金于虎
发布于 06/22 15:22
字数 227
阅读 5
收藏 0
点赞 0
评论 1

如果父组件需要使用子组件中的内容怎么办,比如父组件需要控制子组件的显示

	<div id="root">
		<child><template slot-scope="props">
			
			<h1>{{props.item}} <div>编辑</div></h1>
		</template></child>
	</div>
    <script type="text/javascript">
    	Vue.component('child',{

    		data:function(){
    			return {
    				list:[1,2,3,4]
    			}
                
    		},
    		props:['content'],
    		template: `<div>
    		  <ul>  <slot v-for="item of  list" :item=item></slot></ul>
    		     </div>
    		   `
    	})

    	new Vue({
    		el:'#root'
    	})
    </script>

我们在父组件中拿到了 子组件的数据,slot-scope接受所有传递过来的数据

作用域插槽

1. 作用域插槽必须是一个template开头和结尾的内容
2. 声明子组件需要接受的数据都在放在那props-slot
3. 告诉子组件接受的模板信息(应该怎么展示)

© 著作权归作者所有

共有 人打赏支持
粉丝 1
博文 105
码字总数 42695
作品 0
曲靖
加载中

评论(1)

金于虎
http://www.mescroll.com/api.html
Vue组件三-Slot分发内容

Vue组件三-Slot分发内容 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息,父...

mdiep
05/13
0
0
深入理解java虚拟机-运行时栈帧结构

栈帧是什么? 用于支持虚拟机进行方法调用和方法执行的数据结构. 栈帧都存储了些什么东东? 每一个栈帧都包括方法的局部变量表,操作栈,动态连接和方法返回地址和一些附加信息等. 线程,栈帧,方法...

sonysce
2014/02/26
0
0
[虚拟机字节码执行引擎] 1 - 栈桢

本文主要内容 前言 运行时栈桢结构 已经学习了虚拟机内存区域、Class文件结构、类加载机制等知识,是时候学习虚拟机字节码执行过程了。 前言 虚拟机是一个相对物理机而言的概念,它们都有代码...

某昆
01/06
0
0
《深入理解Java虚拟机》之执行引擎栈针(8)

一. 运行时栈帧结构 1. 栈帧是用于支持虚拟机进行方法调用和方法执行的数据结构,它是虚拟机运行时数据区中的虚拟机栈的元素。栈帧存储了方法的局部变量,操作数栈,动态链接,方法返回地址...

lixiyuan
2014/04/12
105
0
JavaScript 常用功能总结

编吐血整理加上翻译,太辛苦了~求赞! 本文主要总结了JavaScript 常用功能总结,如一些常用的额JS 对象,基本数据结构,功能函数等,还有一些常用的设计模式。 目录: 众所周知,JavaScript是...

葡萄城控件技术团队
2016/01/21
88
1
Vue 2.x 实战之后台管理系统开发(二)

1. 导语 承接上文:Vue 2.x 实战之后台管理系统开发(一) 在上一篇文章中,我详细叙述了如何创建项目框架和引入各种后台常用插件,做好这些准备工作后,我们就可以着手进行页面的开发了。在...

小和子茶
07/17
0
0
Java虚拟机--运行时栈帧结构

栈帧是用于支持虚拟机进行方法调用和方法执行的数据结构,它是虚拟机运行数据时数据区中的虚拟机栈的栈元素。栈帧存储了方法的局部变量表、操作数栈、动态连接和方法返回地址等信息。每个方法...

霍淇滨
04/01
0
0
JVM中的Stack和Frame

JVM执行Java程序时需要装载各种数据,比如类型信息(Class)、类型实例(Instance)、常量数据(Constant)、本地变量等。不同的数据存放在不同的内存区中,这些数据内存区称作“运行时数据区...

tantexian
2016/08/25
9
0
JVM学习之:虚拟机中的运行时栈帧总结(一)

每个人都知道,各种各样的动画视频,都是由一帧一帧图片连续切换结果的结果而产生的,其实虚拟机的运行和动画也类似,每个在虚拟机中运行的程序也是由许多的帧的切换产生的结果,只是这些帧里...

sun7545526
2012/09/20
0
0
07、Vue.js---Vue对象的实例方法和属性

Vue对象的实例属性和方法分为全局和局部实例属性和方法。全局和局部的区别在于调用者不同。 · 局部实例属性和方法: vm | this .$方法名或属性; · 全局实例熟悉和方法: Vue .方法名或属性...

秋季长青
07/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringBoot | 第十章:Swagger2的集成和使用

前言 前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成。现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的...

oKong
今天
2
0
Python 最小二乘法 拟合 二次曲线

Python 二次拟合 随机生成数据,并且加上噪声干扰 构造需要拟合的函数形式,使用最小二乘法进行拟合 输出拟合后的参数 将拟合后的函数与原始数据绘图后进行对比 import numpy as npimport...

阿豪boy
今天
1
0
云拿 无人便利店

附近(上海市-航南路)开了家无人便利店.特意进去体验了一下.下面把自己看到的跟大家分享下. 经得现场工作人员同意后拍了几张照片.从外面看是这样.店门口的指导里强调:不要一次扫码多个人进入....

周翔
昨天
1
0
Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
昨天
161
1
npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
昨天
1
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
昨天
1
0
python里求解物理学上的双弹簧质能系统

物理的模型如下: 在这个系统里有两个物体,它们的质量分别是m1和m2,被两个弹簧连接在一起,伸缩系统为k1和k2,左端固定。假定没有外力时,两个弹簧的长度为L1和L2。 由于两物体有重力,那么...

wangxuwei
昨天
0
0
apolloxlua 介绍

##项目介绍 apolloxlua 目前支持javascript到lua的翻译。可以在openresty和luajit里使用。这个工具分为两种模式, 一种是web模式,可以通过网页使用。另外一种是tool模式, 通常作为大规模翻...

钟元OSS
昨天
2
0
Mybatis入门

简介: 定义:Mybatis是一个支持普通SQL查询、存储过程和高级映射的持久层框架。 途径:MyBatis通过XML文件或者注解的形式配置映射,实现数据库查询。 特性:动态SQL语句。 文件结构:Mybat...

霍淇滨
昨天
2
0
开发技术瓶颈期,如何突破

前言 读书、学习的那些事情,以前我也陆续叨叨了不少,但总觉得 “学习方法” 就是一个永远在路上的话题。个人的能力、经验积累与习惯方法不尽相同,而且一篇文章甚至一本书都很难将学习方法...

_小迷糊
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部