<!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. 编写可维护的javascript阅读笔记

    格式 变量 变量命名, 采取小驼峰大小写 变量使用名词, 函数前缀为动词 局部变量应统一定义在函数的最上面, 而不是散落在函数的任意角落. 赋初始值的定义在未赋初始值的变量的上面. 我个人建议不使用单 ...

  2. What's Dead & Exploded in Swift's exception stack?

    The Swift compiler marks function arguments for a number of reasons, mostly related to internal opti ...

  3. mysql_connect() 不支持 请检查 mysql 模块是否正确加载

    php的扩展 没有配置好! 打开php.ini文件: 搜索pdo_mysql和curl ;extension=php_curl.dll ;extension=pdo_mysql.dll 然后把2者前面 ...

  4. day06-08面向对象的三大特性

    一.继承 1.1什么是继承?继承是一种创建新类的方式,在python中,新建的类可以继承一个或多个父类,父类又可称为基类或超类,新建的类称为派生类或子类python中类的继承分为:单继承和多继承 cl ...

  5. NGUI报错处理

     Unity5.4.1与NGUI出现的问题Ignoring menu item NGUI because it is in no submenu!   Ignoring menu item NGUI ...

  6. ssh远程连接和linux基本操作

    客户端工具:Xshell,SecureCRT 启动网卡(eth0): ifup eth0 查看IP地址: ifconfig       [root@oldboy~] : [登入名 @ 主机名 文件或者 ...

  7. 00073_Math类

    1.Math类概述 (1)Math 类是包含用于执行基本数学运算的方法的数学工具类,如初等指数.对数.平方根和三角函数: (2)类似这样的工具类 ,其所有方法均为静态方法,并且一般不会创建对象.如Sy ...

  8. 【codeforces 727D】T-shirts Distribution

    [题目链接]:http://codeforces.com/problemset/problem/727/D [题意] 给你6种尺寸的衣服; 他们的尺码依次为S, M, L, XL, XXL, XXXL ...

  9. CF409C Magnum Opus

    CF409C Magnum Opus 题意翻译 题目背景 愚人节题目,题面似乎是一位名叫Nicolas Flamel的炼金术士用拉丁文写的某种物质的配方,结合谷歌尝试翻译了一下: 吾友: 哲人石所言不 ...

  10. Java压缩和解压缩文件工具

    Java压缩和解压缩文件工具 学习了: https://www.oschina.net/code/snippet_1021818_48130 http://blog.csdn.net/gaowen_h ...