<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>slot</title>
	<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<cont :list="[{name:'xhA'}]">
			<!-- slot-scope设置插槽 -->
			<!-- 因为list上prop获取过来的  无法直接设置到插槽中  需要借助 slot-scope读取到  然后才可以设置到插槽中   -->
			<!-- 也可以将prop过来的数据  设置到data中  然后通过data来读取 -->
			<template slot="cc01" slot-scope="list">
				<button>111 </button>
				<!-- 设置插槽数据 -->
				<div>{{list}}</div>
			</template>
			<template slot="cc02"  slot-scope="list">
				<!-- 直接通过直接父类data中来设置 -->
				<button>222----{{dataList}}--333</button>
			</template>
			<template slot="cc03">
				<button>333</button>
			</template>
		</cont>
	</div>
	<script>
		Vue.component('cont',{
			template:`<div>
				<slot name="cc01" :list="list"></slot>
				<slot name="cc02" :list="list"></slot>
				<slot name="cc03" :list="list"></slot>
			</div>`,
			props:{
				list:{
					default:[],
					type:Array
				}
			}
		})

		new Vue({
			data:{
				dataList:[{msg:'111'},{msg:'222'},{msg:'333'}]
			}
		}).$mount('#app')
	</script>
</body>
</html>

　　

vue中slot的用法案例的更多相关文章

  1. Scala进阶之路-Scala中的枚举用法案例展示

    Scala进阶之路-Scala中的枚举用法案例展示 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. Scala中的枚举值和Java中的枚举值有点差别,不过使用起来也都差大同小异,我这 ...

  2. Vue中directives的用法

    关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用,directives做权限按钮的功能 ###1. d ...

  3. 分享vue中 slot用法

    //slot默认用法 //slot带参数name用法

  4. 详解Vue的slot新用法

    摘要: 理解Vue插槽. 作者:前端小智 原文:vue 2.6 中 slot 的新用法 Fundebug经授权转载,版权归原作者所有. 为了保证的可读性,本文采用意译而非直译. 最近发布不久的Vue ...

  5. vue中keep-alive的用法

    1.keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-al ...

  6. jQuery中的ajax用法案例

    什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载 ...

  7. Vue中mixin的用法

    在项目中我们经常会遇到多个组件调用同一个方法的问题,为了避免每次都在.vue文件中定义并调用,我们可采用vue的mixin的用法: 具体使用如下: 我们需要在main.js中引入mixins文件夹下的 ...

  8. 使用slot-scope复制vue中slot内容

    有时候我们的vue组件需要复制使用者传递的内容. 比如我们工程里面的轮播组件需要使用复制的slot来达到循环滚动的效果 使用者关注轮播内容的静态效果,组件负责让其滚动起来 组件: <div cl ...

  9. 浅谈Vue中Slot以及slot-scope

    vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学 ...

随机推荐

  1. Spring cloud父项目的建立

    1.建立一个maven项目 注意建立项目的时候.选择pom的包 2.添加架包 <project xmlns="http://maven.apache.org/POM/4.0.0&quo ...

  2. LCA-倍增法(写给自己看)

    LCA-倍增法 题目又做不下去来写题解了 算法思想 类似于ST表的思想维护dp[i][j]:节点i向上跳2^j高度的的节点 转移方程 \(dp[i][j]=dp[dp[i][j-1]][j-1]\)注 ...

  3. [poj 2411]Mondriaan's Dream （状压dp）

    Mondriaan's Dream Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 18903 Accepted: 10779 D ...

  4. JAVA 上传图片功能

    前后端实现上传图片功能(JAVA代码) 1.前端大概 请求头必须为AJAX请求头: 'X-Requested-With': 'XMLHttpRequest' 一般是指网页中存在的Content-Typ ...

  5. 地图API示例

    http://developer.baidu.com/map/jsdemo.htm#i6_2

  6. vue-cli快速搭建

    vue-cli是用于开发大型vue项目的脚手架工具,使用vue-cli搭建好平台后,只需要关注程序的开发,不用过多的花时间去思考文件配置的问题 当然,还是可以任意进行自定义配置,官方地址:vue-cl ...

  7. 关于ajax异步请求不到数据的问题 302跨域请求

    项目大致问题是这样的 在线咨询模块的数据是通过ajax异步加载来请求到数据,然后动态解析并且显示 前台页面的请求代码 后台action: 另外就是这个项目还有一个登陆权限的认证,如果不登录后台或者登录 ...

  8. Jdk和Cglib 的区别

    一.原理区别: java动态代理是利用反射机制生成一个实现代理接口的代理类,在调用具体方法前调用InvokeHandler来处理. 而cglib动态代理是利用asm开源包,对代理对象类的class文件 ...

  9. BA-Siemens-时间表

    问题1:弹出了subsystem:atom Identifier 0000000023的错误对话框,此问题目前不知道如何处理,先攒着吧.

  10. IntelliJ IDEA 对于generated source的处理

    IntelliJ IDEA 对于generated source的处理 学习了:https://stackoverflow.com/questions/5170620/unable-to-use-in ...