<!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. 02--linux操作系统基础学习笔记

    linux是一种操作系统. 嵌入式系统是以应用为中心的,以计算机技术为基础并且软硬件可剪裁,专用计算机系统. 内核下载网站 https://www.kernel.org/ https://www.ke ...

  2. Swift - 反射（Reflection）的介绍与使用样例（附KVC介绍）

    1,反射(Reflection) 对于C#.Java开发人员来说,肯定都对反射这个概念相当熟悉.所谓反射就是可以动态获取类型.成员信息,同时在运行时(而非编译时)可以动态调用任意方法.属性等行为的特性 ...

  3. 文字左右滚动选择,改变direction的值

    1.从左到右滚动显示<marquee direction=left>测试</marquee> 2.从右到左滚动显示<marquee direction=right> ...

  4. Jenkins 部署 PHP 应用

    安装 Jenkins 方式一:docker方式安装 拉取jenkins官方镜像,按照镜像文档启动镜像就可以了 方式二:手动安装 以下所有操作都使用 root 用户进行操作. 在各项目官网,下载 Jav ...

  5. 打包c++项目

    InstallShield Limited Edition for Visual Studio 2013 图文教程(教你如何打包.NET程序) InstallShield 2015 Limited E ...

  6. Asp 6种页面转向方法

    asp.net 页面转向方法其实就是两种 服务器端转向和客户端转向 客户端转向实质上是指由浏览器直接向服务器端重新发送一个请求. 而服务器端转向是指服务器内部进行页面的跳转. 服务器端转向和客户端转向 ...

  7. 四种ASP网页跳转代码

    时间:2012-06-12 21:12来源:未知 输入:铜都风尘 点击: 32987 次 如果你要在服务器端跳转,可以这样: Response.Redirect(http://blog.163.com ...

  8. 51nod-独木舟问题

    n个人,已知每个人体重,独木舟承重固定,每只独木舟最多坐两个人,可以坐一个人或者两个人.显然要求总重量不超过独木舟承重,假设每个人体重也不超过独木舟承重,问最少需要几只独木舟?分析:  一个显然的策略 ...

  9. [luogu1463 HAOI2007] 反素数 (约数)

    传送门 Description 对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4. 如果某个正整数x满足:g(x)>g(i) 0<i<x,则称x为反质数.例 ...

  10. JAVA学习之枚举

    1.新建一个枚举类 public enum Apple{ FUJI, PIPPIN, GRANNY_SMITH } 通过查看字节码,可以看到,枚举类的实现方式: 1)继承自java.lang.Enum ...