<!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. 记一次IOS对 JS的支持问题

    最终在这位博主那块找到问题https://blog.csdn.net/github_36487770/article/details/82465741 在利用Vue开发一个功能时遇到时间拼接格式化问题 ...

  2. Java中数组的反转

    public class ArrayDemo2 { public static void main(String[] args) { //定义一个数组存放元素 int[] arr3 = {10, 20 ...

  3. openlayers5学习笔记-001

    tmp.initPoint = function (items) { //初始化所有农户点坐标,聚合 var count = items.length; var features = new Arra ...

  4. 企业级任务调度框架Quartz(8) 线程在Quartz里的意义（2）

    前序:      做为企业里的任务调度框架,出现同一时间点同时运行两个任务,或者两个任务因为开始的执行时间和执行时间的长短,很有可能出现任务并发执行的情况:因为Quartz的实现是采用java编程,那 ...

  5. vs code格式化代码快捷键

    windows:shift+alt+F ubuntu: ctrl+shift+i

  6. anaconda下jieba和wordcloud安装

    1.在anaconda交互环境下安装jieba,输入命令:  pip install jieba 2.在https://pypi.python.org/pypi/wordcloud下载wordclou ...

  7. SCOI2003 严格N元树

    SCOI2003 严格N元树 Description 如果一棵树的所有非叶节点都恰好有n个儿子,那么我们称它为严格n元树.如果该树中最底层的节点深度为d (根的深度为0),那么我们称它为一棵深度为d的 ...

  8. Cocos2d切换场景出现的问题-error C2653: “***”不是类或命名空间名称

    1,在开头引入头文件 2,在要引入的头文件中,去除以下代码: #ifndef __HELLOWORLD_SCENE_H__ #define __HELLOWORLD_SCENE_H__ #endif ...

  9. Python编程：从入门到实践 - matplotlib篇 - plot & scatter

    matplotlib篇 plot & scatter # filename.py 获取当前文件名方法 import sys # 当前文件名 print(sys.argv[0]) # 去除后缀后 ...

  10. 端到端图片识别 Python实现 Tensorflow

    基于python语言的tensorflow的‘端到端’的字符型验证码识别 1   Abstract 验证码(CAPTCHA)的诞生本身是为了自动区分 自然人 和 机器人 的一套公开方法, 但是近几年的 ...