Vue 作用域插槽
使用场景:复用子组件的slot,又可以使slot的内容不一样。
- <!DOCTYPE html>
- <html lang="zh">
- <head>
- <meta charset="UTF-8" />
- <title>Vue</title>
- </head>
- <body>
- <div id="app">
- <my-component :books="books">
- <template slot="book" slot-scope="props">
- <li>{{props.bookName}}</li>
- </template>
- </my-component>
- </div>
- <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
- <script type="text/javascript">
- Vue.component('my-component', {
- template: ` <ul> <slot name="book" v-for="book in books" :book-name="book.name"><slot> </ul> `,
- props: {
- books: {
- type: Array,
- default: function() {
- return [];
- }
- }
- }
- });
- new Vue({
- el: "#app",
- data: {
- books: [{
- name: 'css'
- }, {
- name: 'js'
- }, {
- name: 'html'
- }, ]
- }
- })
- </script>
- </body>
- </html>
Vue 作用域插槽的更多相关文章
- vue作用域插槽的应用
问题场景: 存在一个列表,然后当鼠标放入列表中的名称上的时候,自动弹出简介,类似这种效果, 我们当然可以使用positon relative和absolute搭配达到这样的效果,但是现在有一个奇葩的问 ...
- 细说Vue作用域插槽,匹配应用场景。
最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+. 首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子, ...
- vue 开发系列(十) VUE 作用域插槽
使用场景 官方解释,有时让插槽内容能够访问子组件中才有的数据是很有用的.比如我们在使用ant-design-vue 的表格控件时. <a-table-column title="注释& ...
- Vue作用域插槽:用作循环结构的模版
一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <todos :list=&q ...
- Vue作用域插槽:基本用法
一 项目结构 二 App组件 <template> <div id="app"> <!-- 子组件 --> <user v-slot:de ...
- vue作用域插槽
简而言之,作用域插槽就是让插槽内容能够访问子组件中的数据. 案例如下:有CurUser组件 <template> <span> <!-- 在slot 元素上绑定user, ...
- 新版vue作用域插槽的使用
2.6开始,作用域插槽的使用有了不同的地方: 作用域插槽的个人理解就是让子组件的数据可以在父组件中使用: 也是一个数据传递的方式了: 不多说,上代码 子组件定义一个插槽,并且定义一个需要传递到父组件 ...
- vue作用域插槽实践
引言 我在练手的时候发现后端返回的数据可以通过两种方式渲染 (自己遇到的 可能你都会 哈哈哈) 后端传过来的数据函数 from django.http import JsonResponse def ...
- Vue的作用域插槽
一.通常情况下都是父组件传递数据给子组件进行展示的(无法改变子组件的展示方式):而作用域插槽允许子组件通过slot向父组件传递数据,类似React中的“以函数为子组件”,由父组件决定渲染的内容(包含绑 ...
随机推荐
- Linux命令之useradd
useradd [选项] LOGIN(登录名) useradd –D useradd –D [选项] 创建一个新用户或更新默认新用户信息.useradd和adduser命令相同,adduser是use ...
- 31、Flask实战第31天:cms后台修改密码
cms后台修改密码界面布局 先创建cms_resetpwd.html页面,继承cms_base.html {% extends 'cms/cms_base.html' %} {% block titl ...
- 【BZOJ 1815】【SHOI 2006】color 有色图
http://www.lydsy.com/JudgeOnline/problem.php?id=1815 这道题好难啊,组合数学什么根本不会啊qwq 题解详见08年的Pólya计数论文. 主要思想是只 ...
- 计蒜客NOIP2018模拟1
https://www.jisuanke.com/contest/1152 T1:最失败的一道题,其实就是道水题,好几种写法,一种都没想出来. 题意转化后就是:每个数可以选a[i]和a[i]-k,最后 ...
- 【费用流】hdu5988 Coding Contest
从源点向每个点连接容量为该点人数,费用为1的边, 把原图中的每条边拆成两条,一条容量为1,费用为1,另一条容量为ci-1,费用为1-pi 从每个点向汇点连接容量为该点面包数量,费用为1的边. 跑的费用 ...
- android 关于Make sure the plugin is properly configured问题的解决办法
这个问题引发的原因最初的报错是: [2013-10-14 10:01:58 - XXX] The connection to adb is down, and a severe error has o ...
- 给lnmp一键包中的nginx安装openresty的lua扩展
lnmp一键包(https://lnmp.org)本人在使用之后发现确实好用,能帮助我们快速搭建起lnmp.lamp和lnmpa的web生产环境,因此推荐大家可以多试试.但有的朋友可能需要使用open ...
- Activit(活动)实践--知晓当前活动
实际上,我们可能用的不是自己写的项目,而是从别人那里接手过来的代码,因为你刚进公司就有一个新项目开始的概率十分低.阅读别人代码时会有一个很头疼的问题,就是当你需要在某个界面上修改一些非常简单的东西时, ...
- ConcurrentHashMap(Java8)源码分析
1. 常量.成员变量 private static final int MAXIMUM_CAPACITY = 1 << 30; // 和HashMap一样 private static f ...
- CentOS中如何安装7ZIP
7-zip以高压缩率著称,并且是一款免费开源的压缩软件.在常规的Linux发行版中,无法通过简单的yum命令来安装该软件.那么在CentOS中,如何安装7ZIP呢?有以下3种方法: 第一种,源码编译安 ...