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中的“以函数为子组件”,由父组件决定渲染的内容(包含绑 ...
随机推荐
- python3实践-从网站获取数据(Carbon Market Data-BJ) （pandas，bs4）
自己边看边实践一些简单的实际应用,下面的程序是从某个网站上获取需要的数据. 在编写的过程中,通过学习陆续了解到一些方法,发现Python真的是很便捷. 尤其是用pandas获取网页中的表格数据,真的是 ...
- Xamarin.Forms教程下载安装Xamarin.iOS
Xamarin.Forms教程下载安装Xamarin.iOS 下载安装Xamarin.iOS Xamarin.iOS可以为Mac上iOS应用程序在Windows计算机上编写和测试网络提供构建和部署服务 ...
- 解决phpStudy启动网站警告问题
在用phpStudy的时候,在页面中会有一些警告 notice:Undefined variable... notice:Undefined index... 在php.ini里面找到 display ...
- 【贪心】Highway
[UVa1615]Highway 算法竞赛入门经典第8章8-11(P255) 题目大意:给定平面上N个点和D,要求在x轴上选出一些点,每个给定的点至少与一个选出的点欧几里得距离<=D 试题分析: ...
- [UOJ62]怎样跑得更快
以下用等号代替同余 这个式子是$\sum\limits_{j=1}^n(i,j)^{c-d}i^dj^dx_j=b_i$ 令$g(n)=\sum\limits_{e|n}\mu\left(\frac ...
- 【模拟】【set】hdu 4789 ICPC Ranking
写了一晚上,TLE到死,我选择GG 喵的好像还是前几年我校出的题,这整场都……tm…… 改日在战 /*TLE代码*/ #include<cstdio> #include<vector ...
- Perl正则表达式
perl正则表达式就是通过一串特别设计的字符串,可以按照我们的需求匹配.替换.转化目标字符串.本文主要是对一些常用的正则表达以及语法的总结以及举例,供广大喜爱Perl的同学交流学习. 操作符: =~ ...
- Maven打war包时，添加本地jar包
1.在项目根目录中新建lib文件夹,添加jar包 2.在pom.xml文件中添加dependency <dependency> <groupId>com.oracle</ ...
- Manthan, Codefest 16 G. Yash And Trees dfs序+线段树+bitset
G. Yash And Trees 题目连接: http://www.codeforces.com/contest/633/problem/G Description Yash loves playi ...
- Java反射机制的简单学习
今天看了一下Java的反射机制,就此记录一下. 首先,我们要先了解一下什么是反射? 反射的概念是由Smith在1982年首次提出的,主要是指程序可以访问.检测和修改它本身状态或行为的一种能力. JAV ...