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等常用选项使用频率.使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学 ...
随机推荐
- mongoDB 介绍（特点、优点、原理）
介绍:MongoDB是一个基于分布式文件存储的数据库.由C++语言编写.旨在为WEB应用提供可扩展的高性能数据存储解决方案. 特点:高性能.易部署.易使用,存储数据非常方便. 主要功能特性有: Ø 面 ...
- SaltStact自动化运维工具03
存储位置 类型 采集方式 场景Grains minion 静态 minion启动时,可以刷新 1.获取信息 2.匹配pil ...
- 关于MySQL日期操作函数 date_formate 的使用
基本语法:DATE_FORMAT(date,format)说明:date 参数是合法的日期.format 规定日期/时间的输出格式.可以用的格式主要有格式 描述%a 缩写星期名%b 缩写月名%c 月, ...
- Java根据HttpServletRequest请求获取服务器的IP地址
以下总结了两种根据HttpServletRequest请求获取发出请求浏览器客户端所在服务器的IP地址方法: 代码: import javax.servlet.http.HttpServletRequ ...
- BZOJ 5508: [Tjoi2019]甲苯先生的字符串 矩阵乘法_思维
求 $f[i][j]=∑f[i−1][k]$,$'a'<=k<='z'$ . 用矩阵乘法转移一波即可. 竟然独自想出来了QAQ Code: #include <bits/stdc++ ...
- 树（2）-----leetcode(层、深度、节点)
1.树的类实现: class TreeNode(object): def __init__(self, x): self.val = x self.left = None self.right = N ...
- Python笔记13------pandas作图
1.pandas可以用来画DataFrame和Series的图 如: import numpy as npimport matplotlib.pyplot as pltimport pandas as ...
- 【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装
// DOM框架(选择器框架) (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 向现 ...
- nyoj11-奇偶数分离
奇偶数分离 时间限制:3000 ms | 内存限制:65535 KB 难度:1 描述 有一个整型偶数n(2<= n <=10000),你要做的是:先把1到n中的所有奇数从小到大输出,再 ...
- alg--动态规划（dynamic planning)
怎么开头呢? 一句话概括吧, dp的思想就是递归的反思想. 参考的理化: https://www.cnblogs.com/steven_oyj/archive/2010/05/22/1741374.h ...