文档章节

作用域slot

 金于虎
发布于 06/22 15:22
字数 227
阅读 9
收藏 0

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

	<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
Vue作用域插槽 :slot-scope 实例

昨天看vue的官网文档,在slot-scope这块不是特别的明白,今天自己做了一个小例子,便于理解。 先说一下我们假设的应用常用场景,我们已经开发了一个代办事项列表的组件,很多模块在用,现在要...

愚坤
09/04
0
0
深入理解java虚拟机-运行时栈帧结构

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

sonysce
2014/02/26
0
0
JavaScript 常用功能总结

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

葡萄城控件技术团队
2016/01/21
88
1
[虚拟机字节码执行引擎] 1 - 栈桢

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

某昆
01/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Apache日志不记录访问静态文件,访问日志切割,静态元素过期时间设置

Apache配置不记录访问静态文件的日志 网站大多元素为静态文件,如图片、css、js等,这些元素可以不用记录 vhost原始配置 <VirtualHost *:80> ServerAdmin test@163.com DocumentRoo...

野雪球
38分钟前
0
0
聊聊storm的ICommitterTridentSpout

序 本文主要研究一下storm的ICommitterTridentSpout ICommitterTridentSpout storm-core-1.2.2-sources.jar!/org/apache/storm/trident/spout/ICommitterTridentSpout.java public interface......

go4it
42分钟前
1
0
Ubuntu常用操作

查看端口号 netstat -anp |grep 端口号 查看已使用端口情况 netstat -nultp(此处不用加端口号) netstat -anp |grep 82查看82端口的使用情况 查找被占用的端口: netstat -tln netstat -tl...

hc321
昨天
1
0
网站cdn的静态资源突然访问变的缓慢,问题排查流程

1.首先我查看了一下是否自己的网络问题,通过对比其他资源的访问速度和下载速度,确认不是 2.通过ping 和 tracert 判断cdn域名能否正常访问,(最后回想感觉这一步可以省略,因为每次最终能访...

小海bug
昨天
3
0
Mybatis 学习笔记四 MyBatis-Plus插件

Mybatis 学习笔记四 MyBatis-Plus插件 maven依赖 <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus</artifactId> <ve......

晨猫
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部