Vue的作用域插槽
一、通常情况下都是父组件传递数据给子组件进行展示的（无法改变子组件的展示方式）；而作用域插槽允许子组件通过slot向父组件传递数据，类似React中的“以函数为子组件”，由父组件决定渲染的内容（包含绑定事件，样式，HTML标签等）；我把数据给你父组件了，你爱怎么处理就怎么处理，极大的提高了灵活性。
二、示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0" />
<title>Vue作用域插槽2</title>
<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
</head>
<body>
<div id="root">
<my-list :books="books">
<template slot-scope="scope" slot="book">
<li>{{scope.book.author}}--{{scope.book.name}}</li>
</template>
</my-list>
</div>
<script>
Vue.component('my-list',{
props: {
books: {
type: Array,
default: () => []
}
},
template: `
<ul>
<slot v-for="item in books" name="book" :book="item"></slot>
</ul>
`
})
var app = new Vue({
el: '#root',
data: {
books: [
{ id: 1, author: '李四', name: '《Vue. js 实战》' },
{ id: 2, author: '王五', name : '《 JavaScript 语言精粹》' },
{ id: 3, author: '张三', name : '《 JavaScript 高级程序设计》' }
]
}
})
</script>
</body>
</html>
Vue的作用域插槽的更多相关文章
- Vue基础-作用域插槽-列表组件
Vue 测试版本:Vue.js v2.5.13 Vue 官网介绍作用域插槽时, 在 2.5.0+,slot-scope 能被用在任意元素或组件中而不再局限于 <template>. 作用域 ...
- [译] 我最终是怎么玩转了 Vue 的作用域插槽
原文链接:https://juejin.im/post/5c8856e6e51d456b30397f31#comment 原文地址:How I finally got my head around S ...
- vue作用域插槽的应用
问题场景: 存在一个列表,然后当鼠标放入列表中的名称上的时候,自动弹出简介,类似这种效果, 我们当然可以使用positon relative和absolute搭配达到这样的效果,但是现在有一个奇葩的问 ...
- 细说Vue作用域插槽，匹配应用场景。
最近在官方文档中看到,vue新增了一种插槽机制,叫做作用域插槽.要求的版本是2.1.0+. 首先来说一下:顾名思义,所谓作用域插槽,主要就在作用域,需要注意的是(以下几点看不懂不要紧,配合下面的例子, ...
- Vue基础-匿名插槽与作用域插槽的合并和覆盖行为
Vue 测试版本:Vue.js v2.5.13 Vue 文档: <slot> 元素可以用一个特殊的特性 name 来进一步配置如何分发内容.多个插槽可以有不同的名字.具名插槽将匹配内容片段 ...
- [Vue]组件——插槽：slot（匿名插槽，具名插槽）与slot-scope（作用域插槽）
1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...
- Vue.js插槽slot和作用域插槽slot-scope学习小结
一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...
- Vue组件之作用域插槽
写作用域插槽之前,先介绍一下Vue中的slot内容分发: 如果<child-component></child-component>标签之间没有插入那两个p标签的话,页面会显示 ...
- Vue.js 源码分析(二十六) 高级应用 作用域插槽 详解
普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单 ...
随机推荐
- P2272 [ZJOI2007]最大半连通子图 tarjan+DP
思路:$tarjan+DP$ 提交:1次 题解:首先对于一个强连通分量一定是一个半连通分量,并且形成的半连通分量的大小一定是它的$size$,所以我们先缩点. 这样,我们相当于要在新的$DAG$上找一 ...
- CF55D Beautiful numbers (数位dp）
题目链接 题解 一个数能被一些数整除,那么一定被这些数的\(lcm\)整除 那么我们容易想到根据\(lcm\)设状态 我们可以发现有用的\(lcm\)只有\(48\)个 那么按照一般的数位\(dp\) ...
- 线上bug或故障界定及填写规范
[线上故障与线上Bug界定] 一.线上故障: 1. 故障参照公司规范稍做调整: a) 1级故障:资讯首页或主App首页无法打开:多条业务线同时不可用:超过15分钟: b) ...
- PyTricks-使用namedtuple以及dataclass的方式定义类
from collections import namedtuple from dataclasses import dataclass # 以前简单的类可以使用namedtuple实现. Car = ...
- Ubuntu系统图形化界面无法登录到root用户的解决方法
Ubuntu默认是禁用了root用户的登录. 系统安装后, 图形化界面无法登录到root用户解决方法:Ubuntu 12.04:1.设置root用户密码: 普通用户登录,sudo passwd ro ...
- Linux发行版的选择
1,需要稳定的服务器,选择CentOS 或 RHEL 2,需要自己定制的桌面系统,选择Ubuntu 3,摸索linux 各方面的知识,选择Gentoo 4,需要稳定性高的系统,选择FreeBSD 5, ...
- Spring Security整合JWT，实现单点登录，So Easy~！
前面整理过一篇 SpringBoot Security前后端分离,登录退出等返回json数据,也就是用Spring Security,基于SpringBoot2.1.4 RELEASE前后端分离的情况 ...
- jupyter notebook 安装代码提示功能
我的是在anaconda中的root环境下运行以下命令,在其他环境下发现没有效果 1 pip install jupyter_contrib_nbextensions jupyter contrib ...
- Maven-Profile 环境隔离
作用 快速切换不同的配置环境,比如开发时是连接的本地数据库,发布线上时是另外的数据库,每次编译打包时都要修该配置文件比较麻烦,这时就可以使用环境隔离了. 配置 本地(Local), 开发(Dev), ...
- centos7 设置 防火墙 开机自启
CentOS 7.0默认使用的是firewall作为防火墙,之前版本是使用iptables. 1.设置firewall开机启动 systemctl enable firewalld 2.禁止firew ...