<!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. 解决strip: Unable to recognise the format of the input file问题

    前言   在编译xilinx的uboot的时候出现了一个问题,始终报错:“strip: Unable to recognise the format of the input file `gen_et ...

  2. java 常用API 时间

    package com.orcal.demc01; import java.text.ParseException; import java.text.SimpleDateFormat; import ...

  3. K3 销售合同开发

    1.实现销售合同中[直接客户]信息的录入后,自动带出关联[省份]的信息,根据BOS单据的基本设置不能将省份信息写成字 段进行推送,故需要在BOS单据中进行插件开发: 开发过程中有个关键表: 1)选择直 ...

  4. nyoj286-动物统计

    动物统计 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描述 在美丽大兴安岭原始森林中存在数量繁多的物种,在勘察员带来的各种动物资料中有未统计数量的原始动物的名单.科学家想判 ...

  5. Linux Shell脚本编程-语句控制

    过程式编程语言bash脚本编程面向过程的编程  顺序执行:默认法则,按照顺序一条一条语句执行  选择执行:分支,条件判断,符合条件的分支予以执行  循环执行:将同一段代码反复执行有限次,所以循环必须有 ...

  6. Python-基础-day1

    一.python的介绍 1.python的出现与应用场景 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯 ...

  7. 自学python到找到工作的心得

    先做个自我介绍,我13年考上一所很烂专科民办的学校,学的是生物专业,具体的学校名称我就不说出来献丑了.13年我就辍学了,我在那样的学校,一年学费要1万多,但是根本没有人学习,我实在看不到希望,我就退学 ...

  8. 《使用CSLA 2019：CSLA .NET概述》原版和机译文档下载

    自己从作者官方网站上(http://www.cslanet.com/)下载的免费版.PDF文档,又使用有道付款翻译的,供大家下载学习,文档中是对CSLA.NET4.9版本的介绍. 下载链接:http: ...

  9. BA-Honeywell R300系统

  10. JS 推断URL中是否含有 http:// 假设没有则自己主动为URL加上

    url = url.substr(0,7).toLowerCase() == "http://" ? url : "http://" + url; 记性不大好. ...