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等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学 ...
随机推荐
- RabbitMQ学习之spring配置文件rabbit标签的使用
下面我们通过一个实例看一下rabbit的使用. 1.实现一个消息监听器ReceiveMessageListener.Java package org.springframework.amqp.core ...
- VFS(Virtual File System)
一.VFS作为内核子系统,为用户空间程序提供了文件系统相关的接口.所有实际文件系统依赖VFS共存,依靠VFS系统工作. 1.VFS提供通用文件系统接口:用户空间程序可以利用标准的UNIX文件系统调用, ...
- vc++如何创建程序-构造函数02
1.若忘记了赋值,出现运行结果是很大的负值(因为我们定义的x与y这两个成员变量存储在内存中是一个随机的值) 当我们调用时,随机输出. //包含输入输出的头文件#include<iostream. ...
- python海龟的使用
############################螺旋正方形############################### import turtle turtle.left(90)for i ...
- tomcat-manager 设置
tomcat默认是没有用户登录控制的,需要登录manager,则需要配置角色与用户 1. 在conf/tomcat-users.xml中添加 <role rolename="manag ...
- Project Euler 29 Distinct powers（ 大整数质因数分解做法 + 普通做法 ）
题意: 考虑所有满足2 ≤ a ≤ 5和2 ≤ b ≤ 5的整数组合生成的幂ab: 22=4, 23=8, 24=16, 25=3232=9, 33=27, 34=81, 35=24342=16, 4 ...
- Project Euler 35 Circular primes
题意:197被称为圆周素数,因为将它逐位旋转所得到的数:197/971和719都是素数.小于100的圆周素数有十三个:2.3.5.7.11.13.17.31.37.71.73.79和97.小于一百万的 ...
- nyoj252-01串
01串 时间限制:1000 ms | 内存限制:65535 KB 难度:2 描述 ACM的zyc在研究01串,他知道某一01串的长度,但他想知道不含有"11"子串的这种长度的0 ...
- 把SQLAlchemy查询对象转换成字典/json使用(汇总)
1.使用SQLAlchemy from sqlalchemy import create_engine,Column,String,Integerfrom sqlalchemy.ext.declara ...
- FansUnion:共同写博客计划终究还是“流产”了
首先说说我原本的计划:我和周围的同学.朋友.好友 共同维护一个博客. 我对其他人并没有过高的期待.我一个人的写作量 = 其他人的写作量. 现实是,其他人没有怎么写. 对于,这个结果,我非常低无奈.谩骂 ...