vue中slot的用法案例
<!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的用法案例的更多相关文章
- Scala进阶之路-Scala中的枚举用法案例展示
Scala进阶之路-Scala中的枚举用法案例展示 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. Scala中的枚举值和Java中的枚举值有点差别,不过使用起来也都差大同小异,我这 ...
- Vue中directives的用法
关于 vue 中 directives 的用法问题,详细可以参考vue官方对directives的解释 当前文章主要讲述directives怎么用,directives做权限按钮的功能 ###1. d ...
- 分享vue中 slot用法
//slot默认用法 //slot带参数name用法
- 详解Vue的slot新用法
摘要: 理解Vue插槽. 作者:前端小智 原文:vue 2.6 中 slot 的新用法 Fundebug经授权转载,版权归原作者所有. 为了保证的可读性,本文采用意译而非直译. 最近发布不久的Vue ...
- vue中keep-alive的用法
1.keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-al ...
- jQuery中的ajax用法案例
什么是 AJAX? AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). 简短地说,在不重载整个网页的情况下,AJAX 通过后台加载 ...
- Vue中mixin的用法
在项目中我们经常会遇到多个组件调用同一个方法的问题,为了避免每次都在.vue文件中定义并调用,我们可采用vue的mixin的用法: 具体使用如下: 我们需要在main.js中引入mixins文件夹下的 ...
- 使用slot-scope复制vue中slot内容
有时候我们的vue组件需要复制使用者传递的内容. 比如我们工程里面的轮播组件需要使用复制的slot来达到循环滚动的效果 使用者关注轮播内容的静态效果,组件负责让其滚动起来 组件: <div cl ...
- 浅谈Vue中Slot以及slot-scope
vue中关于插槽的文档说明很短,语言又写的很凝练,再加上其和methods,data,computed等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学 ...
随机推荐
- (转） shiro权限框架详解06-shiro与web项目整合(上)
http://blog.csdn.net/facekbook/article/details/54947730 shiro和web项目整合,实现类似真实项目的应用 本文中使用的项目架构是springM ...
- js代码 注释 test
<script type="text/javascript"> var obj = { tyep: 'GET', url: '/Backstage/Home/Menu' ...
- PhotoZoom Pro 7怎么进行参数设置
每个用户在使用PhotoZoom时,在针对不同的图片,我们处理的方式也不同.所以在参数设置会因图片不同而不同.那么在PhotoZoom中参数究竟如何设置呢? 首先,我们先打开[参数设置],点击后会弹出 ...
- 使用***客户端和Privoxy让所有CentOS 7命令行工具通过代理访问互联网（转载）
安装*** 首先安装pip: curl -LO "https://bootstrap.pypa.io/get-pip.py" python get-pip.py 通过pip安装** ...
- navicat Premium远程链接mysql报错
1,报错1057,原来是没有远程权限连接mysql 2.打开my.ini文件,添加skip-grant-tables跳过验证 3.添加到path环境变量,前面是英文下的分号 4.切换到cmd,输入my ...
- 实验二：编写输出"Hello World!"
1.首先打开eclipse这个软件,新建Java项目,执行“文件→ 新建→Java项目 ”菜单命令,打开新建Java对话框,在项目名的编辑框中输入项目名编写输出"Hello World!”, ...
- 01springMVC入门
1 MVC模式回顾 Spring MVC是一种基于MVC的Web应用框架. MVC是一种设计模式,MVC在b/s系统下的应用: 执行步骤: 发出请求,请求到MVC当中的C,C接收请求后并不能 ...
- BA-siemens-insight在win7下如何配置opc接口
一.运行环境:win7(OPC接口在win_xp下配置需安装插件,不好意思没搞定,现在只有win7系统32位下的教程了) 由于OPC(OLE for Process Control)建立在Micros ...
- 怎样改动 VC6.0 4.0 2010 打印预览界面上的文字
前言:尽管早已下决心不再碰微软的东西,但手头的项目还得须要维护. 遇到问题还能解决. 问题由来: 之前的软件开发是基于中文环境开发的,建立项目的时候,选择了中文,为了方便客户使用.我们使用了静态编译的 ...
- 【C/C++学院】0724-堆栈简单介绍/静态区/内存完毕篇/多线程
[送给在路上的程序猿] 对于一个开发人员而言,可以胜任系统中随意一个模块的开发是其核心价值的体现. 对于一个架构师而言,掌握各种语言的优势并能够运用到系统中.由此简化系统的开发.是其架构生涯的第一步. ...