Vue中的作用域插槽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue中的作用域插槽</title> </head>
<body>
<div id="app">
<child>
<template slot-scope="props">
<h2>{{props.item}}</h2>
</template>
</child>
</div> <!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('child', {
data: function() {
return {
list: [1,2,3,4,5]
}
},
template: `<div>
<ul>
<slot v-for="item of list"
:item = item>
{{item}}
</slot>
</ul>
</div>`
})
var app = new Vue({
el: '#app'
}) </script>
</body>
</html>
Vue中的作用域插槽的更多相关文章
- Vue组件之作用域插槽
写作用域插槽之前,先介绍一下Vue中的slot内容分发: 如果<child-component></child-component>标签之间没有插入那两个p标签的话,页面会显示 ...
- Vue学习笔记-作用域插槽
有时候我们希望子组件的内容由父组件决定如何展示,这个时候子组件的数据父组件并不能访问到,而作用域插槽的关键之处就在于,父组件能接收来自子组件的slot传递过来的参数. <div id=" ...
- vue中的slot插槽
插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题这里就点出来了,是显示不显示和怎样显示. 1.navigation ...
- Vue 组件3 作用域插槽
作用域插槽是一种特殊类型的插槽,用作使用一个(能够传递数据到)可重用模板替换已渲染元素. 在子组件中,只需将数据传递到插槽,就像你将props传递给组件一样: <div class=" ...
- [译] 我最终是怎么玩转了 Vue 的作用域插槽
原文链接:https://juejin.im/post/5c8856e6e51d456b30397f31#comment 原文地址:How I finally got my head around S ...
- vue中的插槽(slot)
vue中的插槽,指的是子组件中提供给父组件使用的一个占位符,用<slot></slot>标签表示,父组件可以在这个占位符中填充任何模板代码,比如HTML.组件等,填充的内容会替 ...
- vue中具名插槽的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中v-slot使用
vue中v-slot使用 1,v-slot的使用步骤 <!-- slot.vue--> <!-- 通过name属性指定具名插槽,没有name属性的为默认插槽--> <sl ...
- vue中插槽作用域的使用
一.插槽作用域 1.简单来说就是带参数的插槽: 2.使用方式: 在组件标签内部加一个template标签 在template标签上加一个属性scope 值随意书写 在组件内部用slot进行接受,如果给 ...
随机推荐
- maven更换下载镜像源-解决下载慢问题(转)
转自:http://www.cnblogs.com/duking1991/p/6110192.html maven更换下载镜像源-解决下载慢问题 Maven是当前流行的项目管理工具,但官方的库在国 ...
- Python3.5-20190518-廖老师-自我笔记-面向对象
面向对象编程,简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的函数. 把老师分为一类,把学生分为一类.具体到某一个学生就是 这类中的一个具体对象,对象的 ...
- OpenCV常用基本处理函数(4)简单变换,阈值等
几何变换 缩放 img=cv2.imread('messi5.jpg') # 下面的 None 本应该是输出图像的尺寸,但是因为后边我们设置了缩放因子 # 因此这里为 None res=cv2.res ...
- VSCode中行数与代码之间用点点点代替
在settings.json中添加一行 "editor.renderWhitespace": "all"
- mysql内连接(inner join 找两个表的交集)、左连接(left join 交集并且左表所有)、右连接(right join 交集并且右表所有)、全连接(mysql不支持)
用两个表(a_table.b_table),关联字段a_table.a_id和b_table.b_id来演示一下MySQL的内连接.外连接( 左(外)连接.右(外)连接.全(外)连接). MySQL版 ...
- 【记录】Java NIO实现网络模块遇到的BUG
1.背景 通过JavaNio实现一个简单的网络模块,有点像Netty的线程模型,一个线程(AcceptThread)建立新连接,把新连接绑定到某个SelectorThread,SelectorThre ...
- youlexuan父类配置
<!-- 集中定义依赖版本号 --> <properties> <junit.version>4.12</junit.version> ...
- PHP disk_total_space() 函数
定义和用法 disk_total_space() 函数返回指定目录的磁盘总容量,以字节为单位. 语法 disk_total_space(directory) 参数 描述 directory 必需.规定 ...
- eclipse run error:g++ not found in Path
网上有人说: 在eclipse下 windows-->Preference-->C/C++-->Build-->Setting然后选择Discovery标签,将里面的内容全部R ...
- USB编程概念
RE:USB编程概念 >请你指导我如何学习USB虚拟COM端口PROGRAMM,什么是我们needto有(如硬件和软件)的东西. USB是一个典型的复杂的协议栈,在协议的协议.这是很难完全实现 ...